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

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

阿川阿川

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

阅读量292

点赞数

分类专栏： JavaScript 文章标签： html5 javascript html

本文链接：https://blog.youkuaiyun.com/tangkthh/article/details/120177250

版权

JavaScript 专栏收录该内容

53 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

阿川阿川

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

H5项目中有滚动元素，ios系统拖动默认行为和滚动事件冲突解决

donggua_123的博客

05-04

6265

问题：h5页面，在ios系统中，拖动顶部固定元素（红色区域）时，会默认拖动整个浏览器，导致出现白色背景，影响到自定义的滚动事件（橙色区域），因为自定义滚动是用了ui框架的，会导致其短暂的无法滚动，必须要等整个页面停稳了才能滚动橙色区域，影响到体验。这应该是ios系统自带的缓动效果，当用户拖动页面元素时给了一个回弹吸顶的效果，显得更加柔和，但有时候我们是不需要的。想要的效果：到顶后继续向下滑...

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

hanbing1307的博客

03-19

349

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

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

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

weixin_34010949的博客

01-29

1611

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

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

xiao1215fei的专栏

04-25

2036

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

js阻止页面回退

子玉的博客

09-23

1675

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

js禁止页面滚动

weixin_33701617的博客

02-28

2401

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

移动端禁止页面滑动

weixin_42284117的博客

10-10

2996

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

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

10-19

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

javascript 多浏览器 事件大全

12-07

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

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

08-10

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

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

weixin_39863155的博客

01-30

1441

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

iScroll左右滑动阻止内容上下滑动 e.preventDefault() 解决办法

对代码不满足，是任何真正有天才的程序员的根本特征。

08-28

8472

最近写了一个下拉加载（新闻列表页面和详情页面在同一个页面）这个事件真的让我调试了很久，才找到了原因问题:页面下拉不了 window.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 1:在onBeforeScrollStart: function (e) { e.preve

addEventListener注意问题

Mr_linjw的专栏

05-13

3562

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

移动端开发touchmove事件preventDefault引发页面不能滚动问题

AlexS Blog

03-07

1万+

项目中，用到了一个可在页面中的拖拽小图标，由于拖动过程中不能引发页面的拖动@touchmove事件对应函数中加入： document.addEventListener("touchmove",this.preventDefault,false); preventDefault(e) { e.preventDefault(); } 但实际拖动之后，发现长页面上下也无法拖动...

移动端填坑

qq_33834489的博客

04-11

264

1、iOS safari 如何阻止“橡皮筋效果”？document.body.addEventListener('touchmove', function (e) { e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果) }, {passive: false}); 这是由于safari有一个更新：Updated root document touch event...

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