完美解決safari、微信瀏覽器下拉回彈效果。


完美解決safari、微信瀏覽器下拉回彈效果,只保留局部回彈效果。

CSS代碼

.box{ overflow: auto; -webkit-overflow-scrolling: touch; }

HTML代碼

<body class="box"> <div class="scroll" style="height:1500px"> </div> </body>

JS代碼

 
var overscroll = function(el) { el.addEventListener('touchstart', function() { var top = el.scrollTop ,totalScroll = el.scrollHeight ,currentScroll = top + el.offsetHeight; if(top === 0) { el.scrollTop = 1; }else if(currentScroll === totalScroll) { el.scrollTop = top - 1; } }); el.addEventListener('touchmove', function(evt) { if(el.offsetHeight < el.scrollHeight) evt._isScroller = true; }); } overscroll(document.querySelector('.scroll')); document.body.addEventListener('touchmove', function(evt) { if(!evt._isScroller) { evt.preventDefault(); } });
參考網址:https://segmentfault.com/a/1190000007301527


免責聲明!

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



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