完美解决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();
}
});