IOS 的彈性滾動解決方案

編輯：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');

以上所述是小編給大家介紹的IOS 的彈性滾動解決方案，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對本站網站的支持！