开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js 禁止页面滑动

在JavaScript中禁止页面滑动可以通过多种方式实现，以下是一些常见的方法：

1. 禁止整个页面滚动

可以通过给<body>元素添加样式来禁止滚动：

document.body.style.overflow = 'hidden';

或者在CSS中设置：

body.no-scroll {
    overflow: hidden;
}

然后在JavaScript中添加或移除这个类：

document.body.classList.add('no-scroll'); // 禁止滚动
document.body.classList.remove('no-scroll'); // 允许滚动

2. 禁止特定元素的滚动

如果你只想禁止某个特定元素的滚动，可以给该元素设置overflow: hidden;样式。

3. 禁止触摸设备上的滚动

在移动设备上，可以通过监听touchmove事件并阻止默认行为来禁止滚动：

document.addEventListener('touchmove', (event) => {
    event.preventDefault();
}, { passive: false });

通常，这种方法会禁止页面上所有的滚动行为，所以需要谨慎使用，并且最好只在需要的时候启用。

4. 使用CSS锁定页面滚动位置

有时候，你可能想要在弹出模态框或者其他覆盖层出现时禁止滚动，并在关闭它们时恢复滚动位置。这时可以使用以下方法：

// 保存当前滚动位置
let scrollPosition = window.pageYOffset || document.documentElement.scrollTop;

// 禁止滚动
document.body.style.position = 'fixed';
document.body.style.top = `-${scrollPosition}px`;
document.body.style.width = '100%';

// 恢复滚动
document.body.style.position = '';
document.body.style.top = '';
document.body.style.width = '';
window.scrollTo(0, scrollPosition);

应用场景

弹出模态框或对话框时，防止用户滚动背景页面。
显示全屏加载指示器或通知时。
在某些需要固定视图的交互式应用中，如游戏或地图查看器。

注意事项

禁止滚动可能会影响用户体验，因此应该只在必要时使用，并且在适当的时候恢复滚动。
在移动设备上，过度使用touchmove事件阻止可能会导致其他触摸交互失效。
当使用CSS锁定页面滚动位置时，要注意在窗口大小变化时可能需要重新计算滚动位置。

解决问题的方法

如果你遇到了禁止滚动后无法恢复滚动的问题，确保你在恢复滚动时正确地移除了之前设置的样式，并且正确地恢复了滚动位置。如果问题依旧存在，检查是否有其他JavaScript代码干扰了滚动行为的恢复。

希望这些信息能帮助你解决问题。如果你有其他问题或需要进一步的帮助，请随时提问。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

禁止遮罩下页面滑动

最近在业务中遇见一个问题，就是弹出一个蒙版，覆盖整个页面，有一部分内容固定在底部。可是底部内容还是能滑动。我相信在蛮多场景下是需要做到蒙版的时候底部禁止滑动。尤其是手机端。...如果弹出的内容不需要滚动，直接禁止touchmove或者touchstart： var content = document.getElementsByTagName('body')[0]; content.addEventListener...')[0]; content.addEventListener('touchmove', function (e) { e.preventDefault(); }, false) 这两个都是禁止...touch事件，在移动端有效，在PC端用滚轮滑动就禁止不了。...在这边要分享一件事，就是在微信下，当你滑动的时候，透过遮罩触发了body，那么微信默认进行一个进程一样，得等一下才能滑动遮罩上面的元素。暂时没有优化的方法，当然，遮罩没有透明度不会出现。（完）

2.1K3 0

Android ListView禁止滑动

由于数据较少，如果listview滑动感觉不怎么美观，于是想要Listview禁止滑动，其实也很简单，只要拦截listview的Ontouch事件就可以了具体代码如下：`ListView lv = (ListView...default: break; } return true; } });` 这样处理就能禁止...listview的滑动了发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/163274.html原文链接：https://javaforall.cn

1.5K3 0

Android 禁止Viewpager左右滑动功能

首先自定义一个继承自 ViewPager的自定义类 package com.yourcompany; import android.content.Con...

2.4K5 0

设置页面禁止转载

在body标签中添加这行代码即可如何设置页面禁止转载，以及如何破解不让转载的解决办法 οncοntextmenu="return false"告诉浏览器，这个页面是禁止右键的 onselectstart="return false"告诉浏览器，这个页面是不能选中文本的...ctrl+s保存这个页面，，然后用记事本或者编程软件打开保存下来的htm文件，找到body标签头，删除后面的参数，保存，然后双击这个网页html文件

1K3 0

页面小技巧（禁止copy）

打开如下链接，F12调式，把写有屏蔽的注释解掉就可以屏蔽了，不过我个人喜好开源分享，所写的都不会屏蔽，如有用到，麻烦留言一下，谢谢。

6921 0

移动端禁止遮罩层以下屏幕滑动

当做弹窗效果时，希望弹窗出现的时候网页不可再上下滚动、翻页，可以用body{overflow:hidden}，可是做手机站的时候，就不兼容了。

1.5K1 0

mamp环境下禁止页面缓存

2018-06-0312:52:23 发表评论 1℃热度 MAMP Pro是一款适用于Mac操作系统的软件。MAMP PRO是专业级版本的经典本地服务器环境的o...

2.2K3 0

禁止爬虫爬你的页面

众所周知，使用robots.txt文件可以对爬虫能否爬页面进行声明，但是这只是一个“君子协定”，有人遵守也有人不遵守，所以还需要对页面进行一个声明，加入meta代码这样才能有效的对爬虫进行封禁，例如本站就是如此，但是这是一个双刃剑，禁止爬虫的同时，SEO就不那么友好了

4542 0

HTML5-JS操作页面滚动条（禁止、隐藏、显示、不显示）

不显示滚动条（css） ::-webkit-scrollbar { width: 0px; } 禁止页面滚动条（js） document.body.parentNode.style.overflowY...= "hidden"; $("body").parent().css("overflow-y","hidden"); 启用浏览器滚动条（js） document.body.parentNode.style.overflowY

10.9K3 0

js禁止右键点击事件

——达·芬奇 js禁止右键点击事件触发代码 function click() { return false; } function click1() { if (event.button

14K1 0

js禁止右键菜单代码、禁止复制粘贴代码

禁止右键菜单代码、禁止复制粘贴代码 //屏蔽右键菜单 document.oncontextmenu

6.7K2 0

前端页面如何禁止别人调试

程序被 debugger 阻止了，我们无法像以往一样在 Source Tab 中的对应 JS 代码处添加断点调试，无法调试程序的执行逻辑。 2....禁止断点方法及对策遇到防止调试我们可以禁止断点，在 Chrome 控制台的 Source Tab 页点击 Deactivate breakpoints 按钮或者按下 Ctrl + f8。 ...如何防止恶意用户禁止断点呢？...我们可以通过将debugger改写成 Function("debugger")(); 的形式来应对，Function 构造器生成的 debugger 会在每一次执行时开启一个临时 js 文件，代码改造如下所示...推荐一个调试的小技巧通过给 style 标签添加 style="display: block",contenteditable 两个属性实现在页面中便捷的调试样式。

1.8K1 0

前端页面如何禁止别人调试?

程序被 debugger 阻止了，我们无法像以往一样在 Source Tab 中的对应 JS 代码处添加断点调试，无法调试程序的执行逻辑。 2....禁止断点方法及对策遇到防止调试我们可以禁止断点，在 Chrome 控制台的 Source Tab 页点击 Deactivate breakpoints 按钮或者按下 Ctrl + f8。 ...如何防止恶意用户禁止断点呢？...我们可以通过将debugger改写成 Function("debugger")(); 的形式来应对，Function 构造器生成的 debugger 会在每一次执行时开启一个临时 js 文件，代码改造如下所示...推荐一个调试的小技巧通过给 style 标签添加 style="display: block",contenteditable 两个属性实现在页面中便捷的调试样式。

2.4K3 0

【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )

文章目录一、BottomNavigationBar 底部导航栏二、PageView 滑动页面三、BottomNavigationBar 与 PageView 关联四、完整代码示例 1、核心导航组件...Colors.red : Colors.grey), ), ); }).toList(), ) 二、PageView 滑动页面 -...body: PageView( /// 控制跳转翻页的控制器 controller: _pageController, /// 页面滑动 /// 这里设置 PageView 页面滑动也能..., 使用 PageView 的 PageController 的 jumpToPage 方法进行页面跳转 ; PageView 主动设置选中状态 : 滑动 PageView 界面 , 会回调 PageView.../// 这里设置 PageView 页面滑动也能 onPageChanged: (index) { setState(() {

4.6K2 0

蒙层禁止页面滚动的方案

蒙层禁止页面滚动的方案弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。...当弹出蒙层时禁止蒙层下的页面滚动，也可以称为滚动穿透的问题，文中介绍了一些常用的解决方案。...charset="utf-8"> 蒙层禁止页面滚动的方案...charset="utf-8"> 蒙层禁止页面滚动的方案...charset="utf-8"> 蒙层禁止页面滚动的方案

6.4K2 1

php 中js跳转页面跳转页面,js跳转代码_PHP页面跳转 Js页面跳转代码

摘要腾兴网为您分享:PHP页面跳转 Js页面跳转代码，自动刷宝，中信金通，携程抢票，未来屋等软件知识，以及沃金汇，沃行讯通，securecrt.exe，我的世界变形金刚mod，一票通，农场小分队，手电筒...bar<99){ setTimeout(“count()”,100); }else{ window.location = “http://www.jbxue.com/”; } } 第二部分: 页面跳转...复制代码代码示例: 第三部分: 动态页面跳转方法一: PHP 跳转复制代码代码示例: header(“location: http://www.jbxue.com”); ?

30.2K3 0

js登录滑动验证，不滑动无法登陆

js的判断这里是根据滑块的位置进行判断，应该是用一个flag判断 js?...v=2.1.4"> /res/js/bootstrap.min.js?...v=3.3.6"> <script type="text/javascript" src="/res/js/jquery-1.12.4....min.js"> /res/js/jquery.md5.js">

6.8K8 0

uni-app禁止滑动滚动条穿透效果

在做聊天页面的时候用到了表情，这个位置没有做左右轮播滑动效果，就直接做了上下滑动，但是上下滑动的话会导致外部的页面也跟着滑动，所以就写了个方法：@touchmove.stop ="" ---- <

7.1K0 0

Axure原型设计丨页面滑动效果

（3）动态面板的state1内拖入的矩形（我用图片代替）命名为“滑动图片”，动态面板命名为“滑动面板”。设置交互样式（1）单击“滑动面板”，设置“右侧工具栏属性——拖动时”交互。...点击确定，设置完成后交互显示如下：此时已经设置好case1，此处是滑动页面与顶部的交互，让滑动页面在离开顶部范围后能自动滑回顶部。...点击确定，设置完成后交互显示如下：此时已经设置好case2，此处是滑动页面与底部的交互，让滑动页面在离开底部范围后能自动滑回底部。...以上就设置完成啦，最终的“滑动面板”设置交互样式如下：小白问答：问题：如果里面的滑动图片有自己独立交互怎么办？...答案：为了让页面在滑动后返回的效果更加柔和，移动时间可以根据需要调节哦。

2K0 0

dedecms无法登录提示本页面禁止返回

ytkah最近用dedecms做会员系统，在做登录页面的时候发现登陆的时候提示本页面禁止返回，把登陆模板换回官方原来的，竟然可以登陆，那么应该是模板出错了，又看了index_do.php这个文件，这个就是登陆的处理文件...，$fmdo $dopost这两个变量为空的话，系统就会啥都不做，提示本页面禁止返回。...>"> 　　dedecms会员登录页面文件在\member\templets\index-notlogin.htm，加入如上代码后就可以登录了，有遇到类似问题的朋友可以参考一下　　为了方便可以把登录验证码关闭

5.6K8 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭