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