h5禁止ios上拉回弹_通过js解决safari、微信下拉回弹和上拉空白的效果

更新日期: 2018-10-15阅读: 15.4k标签: 上拉加载

在ios中为了让滑动更流畅,不那么生涩,我们需要使用-webkit-overflow-scrolling属性,如下:

-webkit-overflow-scrolling : touch;

其工作原理是:在有这个属性的容器上,系统会创建了一个uiscrollview,应用于该元素并将之作为渲染对象,从而为我们实现体验流畅的触屏滑动。在ios上的表现结果令人十分满意,并且网页滑动和区域滑动的冲突同样解决的很好。


但是在safari、微信等浏览器中会出现下拉回弹和上拉空白的效果。解决办法为:当滚动区滚到顶部时,手再触屏时,把把div的滚动位置向下调一点点,这样系统就会以为还没有滚到头,就会继续滑动。


代码如下:

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://www.fly63.com/article/detial/1144

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!