zoukankan      html  css  js  c++  java
  • 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防止阻止默认事件不生效
    }

  • 相关阅读:
    2019.8.15刷题统计
    2019.8.12刷题统计
    2019.8.11刷题统计
    2019.8.10刷题统计
    2019.8.9刷题统计
    2019.8.8刷题统计
    2019.8.7刷题统计
    2019.8.6刷题统计
    xuezhan.org 6.28
    xuezhan.org 6.27
  • 原文地址:https://www.cnblogs.com/kathy2010/p/14735093.html
Copyright © 2011-2022 走看看