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

来源：互联网发布：淘宝网秋季女装编辑：程序博客网时间：2024/04/28 11:54

在ios下，双击屏幕某些地方，滚动条会自动向上走一段。

当用微信看h5的时候，拖拽到底部，会漏出来，微信自带下面的灰黑色皮肤。

用js解决一下吧，这俩问题很类似，总结到一起了。

----------特别注意，安卓没有发生过这些情况，因为解决办法是给最外层的wrapper，overflow-y:auto;也就是放弃了原生的滚动条，所以解决的时候要判断一下系统，安卓就不用处理了。

html部分：----------------------------

<body>

<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*/

0 0