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

Posted homehtml

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了完美解决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();
    }
});

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=hhj1ahcaakj

以上是关于完美解决safari微信浏览器下拉回弹效果。的主要内容,如果未能解决你的问题,请参考以下文章

angual+mui 双栏上拉加载,微信里面禁用默认事件可用,可以防止浏览器回弹效果

阻止微信浏览器下拉滑动效果(ios11.3 橡皮筋效果)

微信小程序开发——微信小程序下拉刷新真机无法弹回

首页3--界面上拉下拉的回弹效果

H5页面在IOS上滚动回弹问题

iscroll.js上拉下拉刷新时无法回弹问题怎么解决办法