IOS 的彈性滾動


  所謂彈性滾動就是指在翻動長頁面手指離開時,有由慢到塊,由快到慢的過度。

 

  安卓平台上的大多數瀏覽器都默認了該行為

  ios當前還只對<body>下的 overflow 默認產生彈性滾動效果

 

  

  前一陣子做了一個手機官網,用到了 <div> 中的 overflow,再調試 ios 中遇到了彈性滾動的問題:

  ios 下 webkit 彈性滾動 css 指令 -webkit-overflow-scrolling: touch;

  該指令再切換同樣需要做滾動處理的 div 是會遇到一下情況

  1. 伴隨着上一個滾動而滾動  

  2. 起始定位偏差  

  3. 粘滯的阻塞感(失去焦點)

 

  解決方案:

  .session{

    -webkit-overflow-scrolling: touch;

  }

  1. 切換標簽的同時去掉元素的 overflow-scrolling 屬性

  $('.session').removeClass('sollow');

  2. 切換標簽同時對目標 div 做初始化

  document.getElementById('target').scrollTop = '0px'; // 根據需要添加

  3. 將sollow重新加載到目標元素上

  $('.session:eq(' + tar + ')').addClass('display sollow');

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM