zoukankan      html  css  js  c++  java
  • 个税小游戏要点之如何阻止微信浏览器下拉滑动效果

    一、前言

    浏览器在移动端有一个默认触摸滚动的效果,让我们感触最深的莫过于微信浏览器里面,下拉时自带橡皮筋的效果。

    然而在开发的时候我们经常需要阻止此效果。

    在此先直接给一个方案,直接加上下面的代码即可:

    document.body.addEventListener('touchmove', function (e) {
      e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
    }, {passive: false}); //passive 参数不能省略,用来兼容ios和android

    如果不加passive:false,在 ios 上是不能起作用的。

    二、解释

    微信在 Android 端和 IOS 端使用的不是同样的浏览器内核:

    • Android 版 微信浏览器 :QQ浏览器 X5内核(相当于使用的 Chrome)
    • IOS 版 微信浏览器 :WKWebView(相当于使用的Safari)

    所以下面分别使用 Chrome 和 Safari 来分析。

    1. Chrome 默认的事件监听参数:

    useCapture:false 表示事件采用冒泡机制(capture 译为 捕获),浏览器默认就是false;
    passive:false 表示我现在主动告诉浏览器该监听器将使用e.preventDefault()来阻止浏览器默认的滚动行为(可以提高运行速度)。

    2. Safari 默认的事件监听参数:

    在 Safari 中,有一个更新

    Updated root document touch event listeners to use passive mode improving scrolling performance and reducing crashes
    更新了根文档触摸事件侦听器,默认使用passive:true提高滚动性能并减少崩溃

    所以Safari 中默认使用了passive:true,告诉浏览器,此监听事件中,不会阻止默认的页面滚动。这将导致设置的e.preventDefault()代码失效。

    所以 Safari 默认是不会阻止滚动的。

    3. 结论

    我们通过 e.preventDefault(); 阻止默认的下拉滑动的效果,通过添加 passive:false 参数来兼容各个浏览器。即可实现阻止移动页面滚动的功能。

    三、关于 passive 参数

    关于 passive 在事件监听中的作用,推荐大家看这篇文章:passive 的事件监听器

  • 相关阅读:
    分模块开发创建service子模块——(八)
    分模块开发创建dao子模块——(七)
    分模块开发创建父工程——(六)
    Html设置html与body元素高度问题
    原生JS给元素添加class属性
    【雪花点】雪花点的显示——(二)
    【雪花点】雪花点的显示——(一)
    Dom4j用Xpath获取节点——(六)
    Dom4j向XML中指定位置添加、删除、修改节点——(五)
    [置顶] 详细解读:技术有没有前途之分
  • 原文地址:https://www.cnblogs.com/Joe-and-Joan/p/10826410.html
Copyright © 2011-2022 走看看