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

melody_lql 发布于2019-08-01 15:53 / 2323人阅读

摘要：完美解决微信浏览器下拉回弹效果，只保留局部回弹效果。代码代码代码

完美解决safari、微信浏览器下拉回弹效果，只保留局部回弹效果。

CSS代码

.box{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

HTML代码

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

GPU云服务器云服务器回弹效果 safari扩展浏览器 php下拉加载效果 html下拉刷新效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50186.html

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

摘要：完美解决微信浏览器下拉回弹效果，只保留局部回弹效果。代码代码代码完美解决safari、微信浏览器下拉回弹效果，只保留局部回弹效果。 CSS代码 .box{ overflow: auto; -webkit-overflow-scrolling: touch; } HTML代码 JS代码 var overscroll = fu...

muddyway 2019-08-29 11:30 评论0 收藏0
完美解决safari、微信浏览器下拉回弹效果。

摘要：完美解决微信浏览器下拉回弹效果，只保留局部回弹效果。代码代码代码完美解决safari、微信浏览器下拉回弹效果，只保留局部回弹效果。 CSS代码 .box{ overflow: auto; -webkit-overflow-scrolling: touch; } HTML代码 JS代码 var overscroll = fu...

tainzhi 2019-08-22 10:42 评论0 收藏0
深入探究iOS下fixed定位导致的问题

摘要：讨论背景众所周知，元素在下的表现是糟糕的，元素在滚动页面中使用会出现各种奇怪的问题，在微信浏览器中使用就更甚如页面滚动，元素与页面相互分离页面滚动，元素消失等。说明原生渐变颜色终止会覆盖微信重设颜色的机制。讨论背景众所周知，fixed元素在IOS下的表现是糟糕的，fixed元素在滚动页面中使用会出现各种奇怪的问题，在微信浏览器中使用就更甚（如：页面滚动，fixed元素与页面相互分离...

tulayang 2019-08-02 15:57 评论0 收藏0
深入探究iOS下fixed定位导致的问题

摘要：讨论背景众所周知，元素在下的表现是糟糕的，元素在滚动页面中使用会出现各种奇怪的问题，在微信浏览器中使用就更甚如页面滚动，元素与页面相互分离页面滚动，元素消失等。说明原生渐变颜色终止会覆盖微信重设颜色的机制。讨论背景众所周知，fixed元素在IOS下的表现是糟糕的，fixed元素在滚动页面中使用会出现各种奇怪的问题，在微信浏览器中使用就更甚（如：页面滚动，fixed元素与页面相互分离...

toddmark 2019-08-29 13:06 评论0 收藏0
微信里面防止下拉"露底"组件

摘要：从本人这两个月移动实践的经验来看，微信的里面和的滑动效果无论是在安卓还是下的体验都很一般，有明显的卡顿现象，在安卓下面还会出现滑动过快的时候在页面停下来之后滚动条才闪到相应位置的现象。前言在微信里面浏览页面的时候，有一个很管用的方法可以区分这个页面是原生的还是H5形式的。随便打开一个页面，用力往下扯的时候，如果页面上方出现了黑底，黑底上有一行诸如网页由game.weixin.qq....

hot_pot_Leo 2019-08-21 10:41 评论0 收藏0