完美解决safari、微信浏览器下拉回弹效果

时间:2023-03-09 22:15:30
完美解决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 === ) {
el.scrollTop = ;
}else if(currentScroll === totalScroll) {
el.scrollTop = top - ;
}
}); 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();
}
});