完美解决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