html5禁用浏览器下拉,禁止ios浏览器页面上下滚动 (橡皮筋效果)
发现之前阻止页面滚动的代码e.preventDefault代码失效了。于是自己折腾了一番,找到了解决办法。
一、前言
浏览器在移动端有一个默认触摸滚动的效果,让我们感触最深的莫过于微信浏览器里面,下拉时自带橡皮筋的效果。
然而在开发的时候我们经常需要阻止此效果。
在此先直接给一个方案,直接加上下面的代码即可:
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 参数来兼容各个浏览器。即可实现阻止移动页面滚动的功能。
参考:
https://blog.csdn.net/q36835109/article/details/72179403
https://blog.csdn.net/qq_40717869/article/details/81749970
https://www.cnblogs.com/ziyunfei/p/5545439.html
https://blog.csdn.net/zsc2014030403015/article/details/52885747
https://blog.csdn.net/weixin_39927850/article/details/79353228
https://www.cnblogs.com/jasonwang2y60/p/6848464.html
html5禁用浏览器下拉,禁止ios浏览器页面上下滚动 (橡皮筋效果)相关推荐
- html关闭ios橡皮筋效果,禁止ios浏览器页面上下滚动 (橡皮筋效果)
在ios任何版本的浏览器(包括ios微信内置的浏览器),滚动页面的时候会出现整个页面上下滚动的效果(百度说是橡皮筋效果),虽然不耽误使用,但是让人心烦,所以要禁止掉这个行为. 有两种方法可以解决这个问 ...
- html游戏禁止微信浏览器下拉,JavaScript实现禁止微信浏览器下拉回弹效果
这篇文章主要为大家详细介绍了JavaScript禁止微信浏览器下拉回弹效果的方法,具有一定的参考和学习JavaScript的价值,对JavaScript感兴趣的小伙伴们可以参考一下本篇文章 本文实例为 ...
- html 禁止页面回弹,JavaScript禁止微信浏览器下拉回弹效果
本文实例为大家分享了JavaScript禁止微信浏览器下拉回弹的效果,供大家参考,具体内容如下 方法1: var overscroll = function(el){ el.addEventListe ...
- 阻止微信浏览器下拉滑动效果(ios11.3 橡皮筋效果)
在升级到 ios11.3 系统后,发现之前阻止页面滚动的代码e.preventDefault代码失效了.于是自己折腾了一番,找到了解决办法,分享给大家. 一.前言 浏览器在移动端有一个默认触摸滚动的效 ...
- QQ浏览器下拉词推广是什么?
疑问:QQ浏览器下拉词推广是什么?(手机APP端) 一.qq浏览器下拉词下拉框推广是什么? 1.了解qq浏览器下拉词框 想知道qq浏览器下拉词框推广是什么,那首先我们要了解下什么是qq浏览器下拉词框: ...
- 下拉词(浏览器下拉)及手机APP端下拉联想推荐词的展示规则
各大是搜索引擎(百度.360.搜狗.神马)下拉词(浏览器下拉)及手机APP端下拉联系推荐词的展示规则是什么呢? 首先,我们要了解到一个下拉词的组成部分有关键词(A)和后缀词(B)组成,关键词简单说就是 ...
- android 微信回弹,完美解决safari、微信浏览器下拉回弹效果。
完美解决safari.微信浏览器下拉回弹效果,只保留局部回弹效果. CSS代码 .box{ overflow: auto; -webkit-overflow-scrolling: touch; } H ...
- Bootstrap下拉菜单中禁用某个下拉菜单
禁用某个下拉菜单 Bootstrap3中,为下拉菜单中某个下拉项的 <li> 元素添加 .disabled 类,就可以禁止该选项,让该菜单项的链接变灰并失去鼠标悬停效果.如: <ul ...
- Qt 禁用ComboBox下拉选项
本文提供连两种禁用ComboBox下拉选项的方法,一种是全部禁用,一种是的单个禁用! 1 全部禁用 功能:使ComboBox无法选择下拉选项 实现:调用ComboBox父类QWidget的setEna ...
- 内置h5 调用safari系统浏览器打开_开发教我做设计:移动端H5页面中的橡皮筋效果...
什么是橡皮筋效果(Over Scroll)? 在浏览被H5与iOS客户端混合编程的页面时,由于Safari浏览器的特性,当H5页面滑动到页面顶部.页面底部的位置时,继续下拉/上拉H5网页会出现&quo ...
最新文章
- 继承和多态 1.0 -- 继承概念(is-a、has-a,赋值兼容规则,隐藏重定义)
- 抢票神器成GitHub热榜第一,支持候补抢票,Python跑起来
- python3 多进程库 multiprocessing 使用简介
- 计算机网络向用户提供的最重要的功能
- javax.jdo.JDODataStoreException: Required table missing : “`VERSION`“ in Catalog ““ Schema ““.
- 地砖中间高四边低_地砖上墙到底好不好?幸好我家没这么做否则全毁了!
- python database ioerror_python – IOError:[Errno 2]没有这样的文件或...
- 看完这篇Redis缓存三大问题,够你和面试官battle几回合了
- 数字图像处理--微分算子为什么也是空间滤波器
- Ecere SDK:用于GUI和图形的跨平台工具包
- VS C++ 重新编译
- nodejs下载慢问题
- 萌新之php一句话木马(上传漏洞)
- 什么是示波器的采样率
- 聊聊北京大部分前端从业者所面临的困境
- Java服务端支付宝对接(详细)
- 程序之外:由电影《少年的你》揭露的bug
- hdu5651xiaoxin juju needs help(大组合数模板)
- 算术右移和逻辑右移区别
- 芯片读取设备详解+U盘芯片flash读取分析实录_一篇看够