移动端浏览器上下滑动时头部收缩修复。

某些手机浏览器上下滑动时头部收缩导致页面抖动很烦。然后自己尝试写了一个修复的东西。

使用的浏览器是手机qq浏览器。尚未测试其他浏览器是否可以使用 - -。

    //移动端浏览器头部收缩修复。
    var w=$(window),
        porH = w.height(), //定义初始ScreenHeight;
        porSCT=0; //定义初始scrollTop
    w.scroll(function(e) {
        _T && clearTimeout(_T);
        _T = setTimeout(function() {
            porSCT = w.scrollTop(); //记录scrollTop
        }, 1); //延迟1ms执行
    }).resize(function(e) {
        if (porH != w.height()) {
            _T && clearTimeout(_T);
            _T = setTimeout(function() {
                w.scrollTop(porSCT);
                porH = w.height();
            }, 1);//延迟1ms执行 不延迟会失效、
        }
    });;
				
时间: 2024-11-05 10:26:40

移动端浏览器上下滑动时头部收缩修复。的相关文章

JS案例之5——移动端触屏滑动

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart:     //手指放到屏幕上时触发 touchmove:      //手指在屏幕上滑动式触发 touchend:    //手指离开屏幕时触发 touchcancel:     //系统取消touch事件的时候触发,这个

移动端触屏滑动事件

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart:     //手指放到屏幕上时触发 touchmove:      //手指在屏幕上滑动式触发 touchend:    //手指离开屏幕时触发 touchcancel:     //系统取消touch事件的时候触发,这个

移动端触屏滑动,JS事件

先了解下 移动端的触屏滑动 毕竟这玩意其实和PC端还是有一定的区别的 hh 整理了下网上的资料放一放 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart:手指放到屏幕上时触发 touchmove:手指在屏幕上滑动式触发 touchend:手指离开屏幕时触发 touchcan

移动端弹性滑动以及滑动出界解决方案

移动端弹性滑动以及滑动出界解决方案 移动端开发经常会遇到两个问题,滑动不灵敏,滑动到哪里就到哪里,这就是常说的:弹性滑动.在一个就是移动开发在真机中经常会遇到滑动出界从而能看见浏览器的背景了,这个在微信是非常常见的.先就这几个问题做一个总结: 首先要搞明白两个概念 1.全局滑动: 滚动条在body节点或者更高层. 2.局部滚动 滚动条在body节点下边的某一个dom节点上.例如:页面有头部和底部固定的. 弄清楚这两个概念还要了解在安卓和ios上这几个问题的解决都是不一样的. 一.首先说滑动不流畅

移动端手指左右滑动切换内容demo

说在开头 最近移动端做了一个手指左右滑动切换内容的效果demo; 为了表示我的无私,决定分享给诸位:(详细代码见附件) 正文   先上html代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta name="viewport" 

js移动端向左滑动出现删除按钮

最近在做移动端项目时,需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮,本来想着直接使用zepto的touch.js插件,因为之前实现相同的功能时用过这个插件,当时还挺好用的,直接使用它的swipeLeft和swipeRight方法即可,可是今天又开始做这个功能时,却发现这两个方法在使用时毫无效果,一点反应都没有.上网查资料,又下载了最新版本的zepto和touch.js,都没有用,也不知为什么?所以就弃用了这个插件.下面是我后来实现后的代码,其实就是用了原生js的touch事件

移动端浏览器前端优化

相对于桌面端浏览器,移动端Web浏览器上有一些较为明显的特点:设备屏幕较小.新特性兼容性较好.支持一些较新的HTML5和CSS3特性.需要与Native应用交互等.但移动端浏览器可用的CPU计算资源和网络资源极为有限,因此要做好移动端Web上的优化往往需要做更多的事情.首先,在移动端Web的前端页面渲染中,桌面浏览器端上的优化规则同样适用,此外针对移动端也要做一些极致的优化来达到更好的效果.需要注意的是,并不是移动端的优化原则在桌面浏览器端就不适用,而是由于兼容性和差异性的原因,一些优化原则在移

微信内部浏览器打开网页时提示外部浏览器打开升级版探讨-直接跳转默认浏览器打开

在涉及移动端支付的项目时,由于对支付需求的精细化,不仅需要扫码支付,还有唤醒App支付,另外还有在微信.QQ.支付宝内置浏览器给出相应的提示. 好在国内各大巨头公司在开发浏览器的时候都在浏览器标识上加了相应的字符,下面直接贴代码: function is_neizhi() { var ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == "micromessenger") { return

gallery左右滑动时图片淡入淡出

前几天,公司项目有一个功能要做成滑动图片的淡入淡出,要一边滑动一边改变,所以ViewFlipper左右滑动效果就不能了.网上找了很久,也找不到资料,所以自己写了一个,通过滑动改变imageView的透明度.当按下图片时,先记下imageView的位置,图片滑动时,位置发生变化,就可以算出移动的距离,从而可以算出alpha的值.当图片向左滑动时,设置imageView的Alpha即imageView.setAlpha(255-alpha),设置下一个nextView的Alpha即nextView.