h5页面ios，双击向上滑动，拖拽到底部还能继续拖拽

来源：互联网发布：下载中文ae软件编辑：程序博客网时间：2024/05/04 02:08

在iOS下，双击屏幕某些地方，滚动条会自动向上走一段。
当用微信看h5的时候，拖拽到底部，会漏出来，微信自带下面的灰黑色皮肤。
注意：只有你的页面完全充满屏幕的页面才出现该问题，当你的html5页面超过屏幕100ps像素时就没有该问题了。所以并非所有的页面都修改样式。
用js解决一下吧，这俩问题很类似，总结到一起了。
———-特别注意，安卓没有发生过这些情况，因为解决办法是给最外层的wrapper，overflow-y:auto;也就是放弃了原生的滚动条，所以解决的时候要判断一下系统，安卓就不用处理了。

html部分：----------------------------<body><div class="wrapper">     <section>内容部分aaaa111</section>     <section>内容部分aaaa222</section>     <section>内容部分aaaa333</section></div></body>css部分：--------------------------.wrapper2{  position:absolute;  top:0;  bottom:0;  left:0;  right:0;   overflow-y:auto;  -webkit-overflow-scrolling : touch; }js部分：----------------------------/*阻止ios拖拽到底部还能继续拖拽*/var ScrollFix = function(elem) {    // Variables to track inputs    var startY, startTopScroll;    elem = elem || document.querySelector(elem);    // If there is no element, then do nothing        if(!elem)        return;    // Handle the start of interactions    elem.addEventListener('touchstart', function(event){        startY = event.touches[0].pageY;        startTopScroll = elem.scrollTop;        if(startTopScroll <= 0)            elem.scrollTop = 1;        if(startTopScroll + elem.offsetHeight >= elem.scrollHeight)            elem.scrollTop = elem.scrollHeight - elem.offsetHeight - 1;    }, false);};/*判断设备调用ScrollFix*/var sUserAgent=navigator.userAgent.toLowerCase();if(sUserAgent.match(/iphone os/i) == "iphone os"){    $('.wrapper').addClass('wrapper2');    ScrollFix($('.wrapper2')[0]); }/*阻止用户双击使屏幕上滑*/var agent = navigator.userAgent.toLowerCase();        //检测是否是iosvar iLastTouch = null;                                //缓存上一次tap的时间if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0){    document.body.addEventListener('touchend', function(event)    {        var iNow = new Date()            .getTime();        iLastTouch = iLastTouch || iNow + 1 /** 第一次时将iLastTouch设为当前时间+1 */ ;        var delta = iNow - iLastTouch;        if (delta < 500 && delta > 0)        {            event.preventDefault();            return false;        }        iLastTouch = iNow;    }, false);}

原来不部分页面截图：
这里写图片描述
双击屏幕自动上移后的部分页面截图：

0 0