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

本文转载自查看原文 2017-10-25 15:57 3715

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();
    }
});

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 完美解决safari、微信浏览器下拉回弹效果。 h5禁止ios上拉回弹_通过js解决safari、微信下拉回弹和上拉空白的效果微信小程序 transform 实现惯性滚动，回弹效果【下拉回弹】禁止iOS的弹性滚动微信的下拉回弹微信浏览器禁止下拉弹性效果阻止浏览器回弹效果阻止微信浏览器下拉滑动效果（ios11.3 橡皮筋效果） ScrollView的顶部下拉和底部上拉回弹效果移动端微信浏览器和ios页面回弹问题 ios的微信浏览器输入框失去焦点后页面不能回弹