禁止ios浏览器页面上下滚动 (橡皮筋效果)弹性滚动 微信的下拉回弹 |
您所在的位置：网站首页 › 苹果手机怎么锁定页面不动 › 禁止ios浏览器页面上下滚动 (橡皮筋效果)弹性滚动 微信的下拉回弹 |
禁止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 https://www.jb51.net/article/81168.htm javascript移动开发中touch触摸事件详解 禁止iOS的弹性滚动 微信的下拉回弹一种方法： html头部添加 然后将页面body的高度设为window的高度 $("body").height( $(window).height() );其他方法 页面高度超过设备可见高度时，阻止掉touchmove事件。 document.body.addEventListener('touchmove', function (event) { event.preventDefault(); }, false);
/** * 禁止浏览器下拉回弹 */ function stopDrop() { var lastY;//最后一次y坐标点 $(document.body).on('touchstart', function(event) { lastY = event.originalEvent.changedTouches[0].clientY;//点击屏幕时记录最后一次Y度坐标。 }); $(document.body).on('touchmove', function(event) { var y = event.originalEvent.changedTouches[0].clientY; var st = $(this).scrollTop(); //滚动条高度 console.log("st = "+st); if (y >= lastY && st 0) { // $(document.body).scrollTop(0); // } }); } stopDrop();
https://segmentfault.com/q/1010000000322091 转载于：http://www.shanhubei.com/禁止ios浏览器页面上下滚动-橡皮筋效果.html https://www.cnblogs.com/muzhifeike/p/5871180.html
|
【本文地址】
今日新闻 |
推荐新闻 |