ios下 H5页面 上拉下拉 页面出现空白问题 解决方法



var ua = navigator.userAgent.indexOf('iphone');//判断是否为ios

if(ua >-1){
//ios下运行
var divEl = document.querySelector('.divEl')//你需要滑动的dom元素
  iosTouchFn(divEl);
}

function iosTouchFn(el) {
//el需要滑动的元素
  el.addEventListener('touchmove',function(e){
      e.isScroller = true;
   })
  document.body.addEventListener('touchmove',function(e){
     if(!e.isScroller){
        e.preventDefault(); //阻止默认事件(上下滑动)
     }else{
       //需要滑动的区域
       var top = el.scrollTop; //对象最顶端和窗口最顶端之间的距离
       var scrollH = el.scrollHeight; //含滚动内容的元素大小
       var offsetH = el.offsetHeight; //网页可见区域高
        var cScroll = top + offsetH; //当前滚动的距离

      //被滑动到最上方和最下方的时候
        if (top == 0) {
           el.scrollTop = 1; //0~1之间的小数会被当成0
        }else if(cScroll === scrollH){
           el.scrollTop = top - 1;
        }
     }
   }, {passive: false}) //passive防止阻止默认事件不生效
}


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM