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

最新推荐文章于 2019-11-30 11:31:19 发布

weixin_30815469

最新推荐文章于 2019-11-30 11:31:19 发布

阅读量305

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/yongwang/p/7542815.html

本文介绍了一种在Safari及微信浏览器中实现局部回弹效果的方法，通过CSS和JavaScript代码，解决了下拉回弹的问题，仅保留了局部回弹的功能。

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