阻止默认事件，浏览器滚动回弹，

最新推荐文章于 2023-09-23 21:16:12 发布

原创最新推荐文章于 2023-09-23 21:16:12 发布 · 334 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #javascript #html

JavaScript 专栏收录该内容

53 篇文章

订阅专栏

这段代码展示了如何在移动端页面上监听touchmove事件，并阻止其默认行为，以实现更精细的滚动控制。通过添加event.preventDefault()，可以防止页面在触摸滑动时的滚动效果，这对于开发一些需要自定义滚动或滑动交互的应用非常有用。

document.body.addEventListener('touchmove', function (e) {
    e.preventDefault() // 阻止默认的事件
}, {passive: false}) // 用来兼容

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

hittcc

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS系列007-浏览器滚动溢出问题

hanbing1307的博客

03-19

388

contain:默认的滚动溢出行为将被内部的元素观察到，但相邻的区域不会产生连续滚动效果。overscroll-behavior-x:这个css属性用来控制当滚动到区域的水平边界时的浏览器行为。- none:相邻的滚动区域不会有连续滚动效果，且默认的滚动溢出行为会被阻止。- auto:默认的滚动溢出行为表现的和正常一样。

javascript 多浏览器 事件大全

12-07

5. `onContextMenu`：在右键菜单弹出时触发，可以阻止默认右键菜单或添加自定义功能。 6. `onDrag`、`onDragDrop`、`onDragEnd`、`onDragEnter`、`onDragLeave`、`onDragOver`、`onDrop`：这些拖放事件在拖动操作的...

参与评论您还未登录，请先登录后发表或查看评论

禁止苹果手机默认行为（阻止页面的滚动）

weixin_34010949的博客

01-29

1629

$(window).on('touchstart',function(e){ e.preventDefault();}); 转载于:https://www.cnblogs.com/gongshunkai/p/6357464.html

PC触摸屏滑动问题及禁止浏览器默认滑动行为

xiao1215fei的专栏

04-25

2113

PC端触屏项目，滑动时会引发浏览器默认动作，比如左右滑动时，会触发浏览器的前进、后退行为，此外，浏览器还带有缩放行为，而一般情况下，项目中是不需要这些行为的，而单纯的禁用浏览器默认行为的代码，会影响浏览器的上下滚动等正当需求，因此需要对禁用默认行为的触发条件进行判断，代码如下： let box = document.querySelector(".app-main"); box.addEventListener("touchstart", function (e) { this.

js禁止页面滚动

weixin_33701617的博客

02-28

2420

开发移动端页面的时候有一个很比较常见的需求，在出现弹窗时，禁止滑动弹窗后面的主体页面。如何实现呢，往下看 js实现整个页面禁止滚动： document.body.addEventListener('touchmove', function(e){ e.preventDefault(); }, { passive: false }); //passive 参数不...

js阻止页面回退

子玉的博客

09-23

1800

这里我再给大家提供一个思路：登录后，基本都会在本地存值里存储登录成功后接口返回的数据，那么我们可以在登录页面进行一个判断，本地存值是否有这个值，或者是未定义，当没有时，正常进行程序；有这个值时，直接跳转至首页，那么当用户在首页时点击回退，页面会回到登录页面，但是在登录页面直接进行了一个判断，就又跳回到首页，这也是一种方法。因此，建议只在特定情况下（例如，在单页应用程序中）才使用这种技术，并确保在用户离开页面之前恢复正常的历史记录状态，以避免不必要的困扰。以下是一个示例，演示如何使用。

移动端使用e.preventDefault()禁止滚动及取消

laihaodong的博客

09-02

3226

相信大家写移动端的时候都会碰到这个问题，当写活动规则弹窗的时候如果页面过长了，即使规则是100%高度覆盖全屏但是如果在上面滑动还是可以拖动背景，有的时候为了更好地体验，我们往往需要在遮罩层存在的情况下干掉背景的滚动效果，而在取消遮罩层之后背景可以继续滑动。移动端防止页面滚动代码(兼容苹果和安卓) // 防止下拉 function touchmove () { document.body....

JavaScript禁止微信浏览器下拉回弹效果

10-19

在触摸移动事件中，我们判断是否为滚动元素，如果不是，那么就阻止默认的滚动行为，以此来实现局部滚动而无回弹的效果。需要特别注意的是，使用这种方法时，滚动区域需要添加一个“scroll”的class，以便进行正确地...

纯原生JS移动端阻止页面元素滚动插件

08-10

1. 与桌面浏览器不同，移动端滚动涉及到更复杂的滚动行为，如弹性回弹（overscroll bounce）、滚动动画等。 2. iOS与Android系统对滚动事件的处理有所不同，需要考虑跨平台兼容性。五、插件实现流程 1. 初始化：...

微信浏览器页面滚动失效

最新发布

03-20

例如，监听touchmove事件，当触摸发生在容器外部时阻止默认行为，容器内部则允许滚动。这需要判断触摸的目标元素是否在可滚动的容器内或其子元素中。另外，iOS的-webkit-overflow-scrolling属性可能有助于改善滚动...

阻止微信浏览器下拉滑动效果（ios11.3 橡皮筋效果）

知之为知之，不知为不知

06-01

974

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

【解决】addEventListener监听滚动与removeEventListener移除监听阻止冒泡（e.preventDefault()）不生效

huangfuyk.的博客

09-19

2499

注：第三个参数passive默认值为false，但是chrome, Firefox等浏览器为了保证滚动时的性能，在Window,、Document、 Document.body上针对 touchstart 和 touchmove 事件将passive默认值改为了true。使用addEventListener监听滚动来阻止冒泡（e.preventDefault()），removeEventListener移除监听阻止冒泡（e.preventDefault()），但未生效。

JS添加事件和解绑事件：addEventListener()与removeEventListener()

mrdu_somefun的博客

12-15

5253

作用： addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。它们都接受3个参数：事件名、事件处理的函数和布尔值。布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。示例：环境：移动端，界面禁止触摸事件要在bo

移动端禁止页面滑动

weixin_42284117的博客

10-10

3049

今天碰到一个问题，用$(‘html’).css(“overflow”,“hidden”)禁止滚动在移动端竟然无效，不知道什么原因，所以又试了几个移动端禁止滑动方法，供参考。方法一：（经测试有效）禁止滑动 document.body.addEventListener('touchmove', function (e) { e.preventDefault() }, {passive: fals...

vue滚动条禁止_js禁止和开启滚动条事件

weixin_39863155的博客

01-30

1509

开发移动端页面的时候有一个很比较常见的需求，在出现弹窗时，禁止滑动弹窗后面的主体页面。如何实现呢，往下看js实现整个页面禁止滚动：document.body.addEventListener('touchmove',function(e){e.preventDefault();},{passive:false});passive是干吗用的呢，设置该属性的目的主要是为了在阻止事件默认行...

addEventListener注意问题

Mr_linjw的专栏

05-13

3607

document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false); 但是有另外一个需求是需要将以上的'touchmove'恢复为默认的。开始我直接使用removeEventListener,但是不起作用。后来发现如果要让removeEventListener成功的话需要把里面fun

js添加事件和移除事件:addEventListener()与removeEventListener()