阻止页面滑动

最新推荐文章于 2024-09-02 16:01:41 发布
最新推荐文章于 2024-09-02 16:01:41 发布
阅读量335 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/E_SSY/article/details/79741988
本文介绍了一种使用JavaScript阻止网页在移动端设备上发生滚动的方法。通过为document.body添加touchmove事件监听器并调用preventDefault()阻止默认行为，可以有效地禁用页面在触摸滑动时的滚动效果。

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

document.body.addEventListener('touchmove', function (event) {
                                        event.preventDefault();
                                        }, false);

页面滑动长弹窗，如何阻止页面滚动？
卡卡西：一个擅长拷贝的前端程序员
06-01 1663
当页面弹层内容过长(如规则弹窗)，手动滑动时，经常是滚动页面内容，而非弹层内容，这种情况的用户交互不是太友好。 解决办法： 当弹出弹层时，手动将页面定住，禁止滚动。 首先想到的就是 “fixed”： function stopMove() { // 滑动长弹窗时，阻止背景跟随滑动 var top = -$(window).scrollTop(); $('body').css({ 'position': 'fixed' }) setTimeou
uni-app - APP平台禁止页面滑动（无法上下滚动屏幕页面）
资深程序员
12-23 1万+
前言 注意：仅 APP 平台，在 pages.json 中进行配置。 有些时候，我们需要将页面固定住，让用户无法下拉与滚动页面。 全局配置 在 globalStyle 中进行配置，便是所有页面均有效。 "globalStyle": { "app-plus": {//app平台 "bounce": "none"//禁止滚动 } }, 局部配置 在该页面 style 中进行配置，仅对该页有效。 "path": "pages/login/login", "style": { "app-plus":
IOS 禁止缩放页面的实现方法
01-04
IOS 禁止缩放页面的实现方法 在ios10前我们能通过设置meta来禁止用户缩放页面： <meta content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0; name=viewport /> 在ios10系统中meta设置失效了： 为了提高Safari中网站的辅助功能，即使网站在视口中设置了user-scalable = no，用户也可以手动缩放。 解决方法：监听事件来阻止 [removed]=function () { document.addEvent
移动设备禁止h5页面滚动
程序员_R的专栏
10-22 9328
document.body.addEventListener('touchmove', function (event) { event.preventDefault(); }, false);
阻止页面滚动事件
HoeWang的博客
04-16 3074
    //阻止整个页面滚动事件    $("body").on("touchmove",function(event){        event.preventDefault;    }, false);    //然后点击取消或者确定时再取消body上的绑定    $("body").off("touchmove");...
手机端阻止页面滑动
liudanyang_21的博客
08-27 379
之前开发了一个手机端页面，里面有个提交表单，操作表单时会有对应的遮罩层提示，而这个遮罩层正是常见的那种盖着全屏黑色半透明的。 问题出现于，当页面高度过长出现滚动条时，这时如果操作表单出现遮罩层，手指在点击屏幕难免会有些滑动动作，这时候页面会或上或下的滚动，这时属于正常现象。 但是页面就偏移了当前的位置，有点不利于用户体验，如果遮罩关闭时页面跑上跑下了，再回到表单位置时，还要在重新滑动页面到达所要的位置，很不利于用户体验。 js有很多种事件可以阻止滚动条的滚动，本篇文章为了实现起来更简单就发现了CSS的实现方
js阻止移动端页面滚动的两种方法
10-20
在移动设备上，当用户在页面中进行交互时，有时我们需要阻止页面的默认滚动行为，以便实现特定的交互效果，例如弹出模态框、滚动锁定等。本文将详细介绍两种JavaScript方法来阻止移动端页面的滚动。 ### 方法一：...
uniapp在app端页面上下左右滑动问题，禁止上下左右滑动影响canvas和触摸事件
qq_42682622的博客
03-24 5966
当在app端运行uniapp项目时会有页面回弹效果，即页面拉到最上面或最下面时有一定的拉伸效果让页面更加柔和，但有些场景我们不希望有这种效果，比如页面中有触摸事件产生图形化效果时，比如有个能画画的canvas画布时此时如果存在回弹效果或滑动效果就会影响画图，通过上图中搜索框和canvas画布的拉伸可以看出影响。
在vue中实现禁止屏幕滚动,禁止屏幕滑动
10-15
由于在遮罩层的根元素上绑定了`@touchmove.prevent`和`@mousewheel.prevent`，任何尝试在该元素上进行的滑动或滚动操作都将被阻止，从而防止底层页面的滚动。 另外，对于传统页面，我们可能会选择在`body`元素上...
tabsSwiper禁止页面滑动
最新发布
10-15
在需要禁止滑动的视图的`scrollView`上设置代理，并重写`scrollViewShouldScrollToTop`方法返回`false`，阻止默认的顶部滚动。 ```swift yourScrollView.delegate = self func scrollViewShouldScrollToTop(_ ...
H5禁止页面滑动
LOVVme的博客
01-27 629
H5禁止页面滑动，CSS一键搞定 touch-action: none; 只适配H5页面，
H5禁止页面滑动/滚动
瑶山的博客
09-25 5219
禁止页面滚动--完美解决方案，滚动条显示与否，手持设备兼容与否 禁止页面滚动 有三种方法 1，依靠css 将页面 document.documentElement.style.overflow='hidden'; document.body.style.overflow='hidden';//手机版设置这个。 如果设置了如上，页面的滚动条将会消失，此时鼠标滚轮失效。 但是 你用键...
如何禁止页面滚动
dayanwu2842的博客
11-27 2953
禁止页面滚动 有三种方法 1，依靠css 将页面 document.documentElement.style.overflow='hidden'; document.body.style.overflow='hidden';//手机版设置这个。 如果设置了如上，页面的滚动条将会消失，此时鼠标滚轮失效。 但是 你用键盘的 上下左右键，你会发现，页面仍然可以滚动。 ...
前端页面弹框遮罩禁止页面滚动
热门推荐
大菜鸟的博客
07-03 6万+
前端页面弹框遮罩禁止页面滚动前端开发经常会遇到的一个问题就是制作一个弹框来向用户提示信息，在这个弹框弹出的同时，往往会伴有一个灰色的遮罩层挡住页面内容，同时整个页面被这层遮罩盖住，不可点击也不可滚动。 要制作这个效果在PC端非常简单，只需要设置html的高度为100%占满屏幕，并且将html的overflow设置为hidden，即可保证页面不可滚动。 但是同样的问题在移动端情况就有所区别。仅
H5移动端页面禁止页面滑动
qq_35520046的博客
09-02 688
H5移动端页面禁止页面上下左右滑动。
禁止页面滚动的几种方法
文摘资讯
05-25 2183
overflow:hidden您可以使用 CSS 的 overflow:hidden 属性来防止页面在弹出浮层时滚动。具体来说，可以通过以下步骤实现：在HTML的 标签上添加一个类名，例如 no-scroll。使用 CSS 将该类名与 overflow:hidden 属性关联，这将防止页面滚动，同时也会隐藏滚动条，例如：.no-scroll { overflow: hidden; }当弹出浮层...
H5禁止/启用页面滚动
xuanwuziyou的专栏
06-21 3243
document.addEventListener('touchmove', this.preventTouchMove, false)preventTouchMove(e) { e.stopPropagation() e.preventDefault() }document.removeEventListener('touchmove', this.preventTouchMov...
阻止H5左右滑动，保留上下滑动
world_kun的博客
07-21 1952
let startX,startY; document.addEventListener("touchstart",function(e){ startX = e.touches[0].pageX; startY = e.touches[0].pageY; }); document.addEventListener("touchmove",function(e){ var moveX = e.touches[0].pageX; var moveY = e.to...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值