阻止页面滑动

最新推荐文章于 2024-09-02 16:01:41 发布

原创最新推荐文章于 2024-09-02 16:01:41 发布 · 336 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript阻止网页在移动端设备上发生滚动的方法。通过为document.body添加touchmove事件监听器并调用preventDefault()阻止默认行为，可以有效地禁用页面在触摸滑动时的滚动效果。

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

E_SSY

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

页面滑动长弹窗，如何阻止页面滚动？

卡卡西：一个擅长拷贝的前端程序员

06-01

1666

当页面弹层内容过长(如规则弹窗)，手动滑动时，经常是滚动页面内容，而非弹层内容，这种情况的用户交互不是太友好。解决办法：当弹出弹层时，手动将页面定住，禁止滚动。首先想到的就是 “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

9329

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

阻止页面滚动事件

HoeWang的博客

04-16

3075

//阻止整个页面滚动事件 $("body").on("touchmove",function(event){ event.preventDefault; }, false); //然后点击取消或者确定时再取消body上的绑定 $("body").off("touchmove");...

手机端阻止页面滑动

liudanyang_21的博客

08-27

381

之前开发了一个手机端页面，里面有个提交表单，操作表单时会有对应的遮罩层提示，而这个遮罩层正是常见的那种盖着全屏黑色半透明的。问题出现于，当页面高度过长出现滚动条时，这时如果操作表单出现遮罩层，手指在点击屏幕难免会有些滑动动作，这时候页面会或上或下的滚动，这时属于正常现象。但是页面就偏移了当前的位置，有点不利于用户体验，如果遮罩关闭时页面跑上跑下了，再回到表单位置时，还要在重新滑动页面到达所要的位置，很不利于用户体验。 js有很多种事件可以阻止滚动条的滚动，本篇文章为了实现起来更简单就发现了CSS的实现方

js阻止移动端页面滚动的两种方法

10-20

在移动设备上，当用户在页面中进行交互时，有时我们需要阻止页面的默认滚动行为，以便实现特定的交互效果，例如弹出模态框、滚动锁定等。本文将详细介绍两种JavaScript方法来阻止移动端页面的滚动。 ### 方法一：...

uniapp在app端页面上下左右滑动问题，禁止上下左右滑动影响canvas和触摸事件

qq_42682622的博客

03-24

6009

当在app端运行uniapp项目时会有页面回弹效果，即页面拉到最上面或最下面时有一定的拉伸效果让页面更加柔和，但有些场景我们不希望有这种效果，比如页面中有触摸事件产生图形化效果时，比如有个能画画的canvas画布时此时如果存在回弹效果或滑动效果就会影响画图，通过上图中搜索框和canvas画布的拉伸可以看出影响。

在vue中实现禁止屏幕滚动,禁止屏幕滑动

10-15

由于在遮罩层的根元素上绑定了`@touchmove.prevent`和`@mousewheel.prevent`，任何尝试在该元素上进行的滑动或滚动操作都将被阻止，从而防止底层页面的滚动。另外，对于传统页面，我们可能会选择在`body`元素上...

tabsSwiper禁止页面滑动

热门推荐

大菜鸟的博客

07-03

6万+

前端页面弹框遮罩禁止页面滚动前端开发经常会遇到的一个问题就是制作一个弹框来向用户提示信息，在这个弹框弹出的同时，往往会伴有一个灰色的遮罩层挡住页面内容，同时整个页面被这层遮罩盖住，不可点击也不可滚动。要制作这个效果在PC端非常简单，只需要设置html的高度为100%占满屏幕，并且将html的overflow设置为hidden，即可保证页面不可滚动。但是同样的问题在移动端情况就有所区别。仅

H5移动端页面禁止页面滑动

qq_35520046的博客

09-02

702

H5移动端页面禁止页面上下左右滑动。

禁止页面滚动的几种方法

文摘资讯

05-25

2229

overflow:hidden您可以使用 CSS 的 overflow:hidden 属性来防止页面在弹出浮层时滚动。具体来说，可以通过以下步骤实现：在HTML的标签上添加一个类名，例如 no-scroll。使用 CSS 将该类名与 overflow:hidden 属性关联，这将防止页面滚动，同时也会隐藏滚动条，例如：.no-scroll { overflow: hidden; }当弹出浮层...

H5禁止/启用页面滚动

xuanwuziyou的专栏

06-21

3244

document.addEventListener('touchmove', this.preventTouchMove, false)preventTouchMove(e) { e.stopPropagation() e.preventDefault() }document.removeEventListener('touchmove', this.preventTouchMov...

阻止H5左右滑动，保留上下滑动

world_kun的博客

07-21

1957

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...