去除IOS微信下自带滚动回弹（橡皮筋效果）

最新推荐文章于 2023-12-27 15:15:14 发布

dk123sw

最新推荐文章于 2023-12-27 15:15:14 发布

阅读量2.8k

点赞数 1

分类专栏： JavaScript 文章标签：微信滚动回弹苹果微信微信拖动背景微信回弹 IOS微信回弹

本文链接：https://blog.csdn.net/dk123sw/article/details/103363297

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

先说结论：可以去除滚动回弹,根据不同情况使用不同的方式。

1.程序内没有滚动

直接使用下面代码轻轻松松没毛病

document.body.addEventListener('touchmove',function(e){
    e.preventDefault()
  },{ passive: false })

2.有滚动的情况

下面是去掉微信自带的回弹的demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
 
        .header, .footer {
            position: fixed;
            width: 100vw;
            height: 40px;
            line-height: 40px;
            text-align: center;
            z-index: 3;
        }
        .header {
            top: 0;
            border-bottom: 1px solid #e6e6e6;
        }
        .footer {
            bottom: 0;
            border-top: 1px solid #e6e6e6;
 
        }
        .scrollEle {
            position: fixed;
            width: 100vw;
            top: 40px;
            bottom: 40px;
            z-index: 2;
            background: #fff;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
        }
    </style>
</head>
<body>
<div class="header">Header</div>
<div class="scrollEle">
    <p style="height: 30vh">1......</p>
    <p style="height: 30vh">2......</p>
    <p style="height: 30vh">3......</p>
    <p style="height: 30vh">4......</p>
    <p style="height: 30vh">5......</p>
    <p style="height: 30vh">6......</p>
</div>
<div class="footer">Footer</div>
</body>
<script>
        var startY = 0;
        function touchStart(e) {
            try {
                var touch = e.touches[0],
                    y = Number(touch.pageY);
                startY = y;
            } catch (e) {
                alert(e);
            }
        }

        document.addEventListener('touchstart', touchStart);
        var ele = document.querySelector('.scrollEle');
       document.addEventListener('touchmove', function (e) {
            var point = e.touches[0];
            if (ele.contains(e.target)) {
                if (ele.scrollTop === 0 && point.clientY > startY) {
                    e.preventDefault();
                } else if (ele.scrollTop === ele.scrollHeight - ele.offsetHeight && point.clientY < startY) {
                    e.preventDefault()
                }
            } else {
                e.preventDefault();
            }
        }, { passive: false });
    
</script>
</html>

第一种第二种

第一种是-webkit-overflow-scrolling: touch;属性产生的滚动回弹，第二种是微信自带的回弹，如果想要实现完全没有滚动回弹此属性就不能添加。之前在一个公众号做入口的APP上我就看到过滚动不加-webkit-overflow-scrolling: touch;属性的，滚动效果极差。我还想怎么连这都不加，现在看好吧我错了想去掉回弹是没办法。

为什么要去掉此属性？（试想如果没有‘头部’元素，那么此属性的效果和微信自带回弹无差）

注意：在实际应用此方式去除滚动时，一定要先确认到底是哪一层出现的滚动条。如果选错可能导致效果无效或者整个页面无法滚动（ele.scrollTop = 0说明并不是此元素滚动，如果是顶层上添加的滚动使用document.documentElement.scrollTop）可参考此文章

闲话 IOS微信下滚动回弹、事件穿透偶尔发生，试试先点无关元素再点滚动内容问题必发生￣へ￣

3.使用better-scroll替代原生滚动

better-scroll基于iscroll实现, 是一款解决移动端（已支持 PC）各种滚动场景需求的插件

想使用此插件我真的很建议是从项目一开始就使用不然会出现很多问题。

优点：完全去掉微信滚动回弹连带事件穿透一并解决。

我遇到的问题： onscroll事件无法被监听，滚动内容点击事件混乱。虽然插件提供了应对阻止浏览器的原生 click 事件的解决办法。但我这边容器内点击事件复杂，有些事件在设置 click为true时管用有些在设置false时管用，这我想不到解决办法。

如果你的滚动容器内没有onscroll监听并且通过设置better-scroll click属性可以解决点击事件问题可以试试使用此插件，（设置bounce： false可以去掉此插件的滚动回弹）

参考：

https://blog.csdn.net/u012392251/article/details/81539313

https://segmentfault.com/a/1190000010510291

https://juejin.im/post/5ad804c1f265da504547fe68

https://blog.csdn.net/zhanglong_web/article/details/82865596

dk123sw

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
去除IOS微信下自带滚动回弹（橡皮筋效果）

先说结论：可以去除滚动回弹,根据不同情况使用不同的方式。1.程序内没有滚动直接使用下面代码轻轻松松没毛病document.body.addEventListener('touchmove',function(e){ e.preventDefault() },{ passive: false })2.有滚动的情况下面是去掉微信自带的回弹的demo<!...
复制链接

扫一扫