简单暴力的禁止html页面滚动的方法

禁用弹窗时页面滚动
最新推荐文章于 2025-04-10 14:27:29 发布
原创 最新推荐文章于 2025-04-10 14:27:29 发布 · 4.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了解决网页弹窗出现时，页面仍然可以滚动的问题。提供了移动端使用ontouchmove及preventdefault()，PC端使用onmousewheel及preventdefault()的方法，并说明了如何在关闭弹窗时恢复默认行为。

在html页面  弹出弹窗的时候总是给一个问题烦到，就是页面还是可以滚动，虽然弹出的div是没变。

解决方法就是：移动端：在弹窗的时候 禁止 ontouchmove，给preventdefault()；

    pc端：在弹窗的时候 禁止鼠标滚动 onmousewheel,给preventdefault();

当弹出隐藏的时候，恢复事件的默认动作就可以了。

HTML阻止页面横向滚动
2301_79326254的博客
10-06 459
我们将使用这两种语言的特性来实现禁止页面横向滚动的效果。这样一来，即使用户使用鼠标滚轮或拖动页面，页面内容也将始终保持在可视范围内，不会出现横向滚动条。在网页设计中，有时候我们希望禁止页面横向滚动，以确保内容在水平方向上的稳定显示。，我们可以在HTML中禁止页面横向滚动。需要注意的是，这种方法只会禁止页面横向滚动，而不会禁止页面纵向滚动。接下来，我们将创建一个HTML文件，并添加必要的标记和样式来实现我们的目标。当你在浏览器中打开该文件时，你将看到页面在水平方向上无法滚动。在上面的代码中，我们在。
禁止网页滚动的HTML编程方法
PixelEnigma的博客
10-08 1062
在Web开发中，有时候我们需要禁止网页的滚动行为，以确保用户在特定情况下无法滚动页面内容。下面我将为你介绍几种实现禁止滚动的HTML编程方法，并附上相应的源代码。这两种方法都可以实现禁止滚动的效果，你可以根据具体的需求选择适合的方法。通过CSS样式可以控制网页的外观和行为，我们可以利用CSS来禁止滚动。，将网页内容的滚动行为禁止。这将使得网页内容无法滚动，无论是通过滚动条、鼠标滚轮还是触摸操作。另一种实现禁止滚动的方法是使用JavaScript。属性，我们可以实现滚动的禁止和恢复。方法一：使用CSS样式。
如何禁止页面滚动
dayanwu2842的博客
11-27 2997
禁止页面滚动 有三种方法 1，依靠css 将页面 document.documentElement.style.overflow='hidden'; document.body.style.overflow='hidden';//手机版设置这个。 如果设置了如上，页面的滚动条将会消失，此时鼠标滚轮失效。 但是 你用键盘的 上下左右键，你会发现，页面仍然可以滚动。 ...
页面禁止滚动
辰辰呐的博客
11-10 910
背景： 有一个蒙版弹窗 要求 在弹出窗口时图片可以放大缩小，但是不可以页面上下滑动；关闭蒙版弹窗时恢复页面滑动功能。    1.原始页面                     2.蒙版弹出窗口页面                   实现代码： function start() {//点击弹出时允许图片放大并禁止滑动 $("meta[name='viewp
如何禁止HTML页面滚动？
王铁柱666的博客
03-29 749
如果你需要根据用户的交互或其他条件动态地控制滚动行为，那么使用JavaScript会是一个更好的选择。这种方法不会真正禁止滚动，但会阻止用户通过鼠标滚轮或触摸板进行滚动。在前端开发中，禁止HTML页面滚动可以通过几种方式实现，具体取决于你的需求和使用的技术栈。如果你需要在特定条件下动态地禁止或允许滚动，可以使用JavaScript来设置HTML或body的。注意，这种方法可能会导致用户体验不佳，因为它会在用户尝试滚动时强制页面跳回到顶部。）也可以阻止滚动，但这种方法可能会影响到布局和用户体验。
设计一个网站的服务条款页面通常涉及编写HTML结构来布局内容，并使用CSS来美化页面
BLOG域名:programb.blog.youkuaiyun.com
07-03 1937
设计一个网站的服务条款页面通常涉及编写HTML结构来布局内容，并使用CSS来美化页面。
当uniapp遇上滚动穿透，巧妙的解决方式~
一粒程序米
04-19 4819
上一次遇上这个滚动穿透，我是暴力解决的，当uniapp遇上可恶的滚动穿透的时候，我是怎么暴力解决的，今天学会了一个巧妙的方式，几行代码，超级方便好用，爱了爱了… 就是利用page-meta标签的page-style属性！ page-meta 的page-style属性相当于HTML的body属性，这个点很重要，之前我想要通过body{overflow:hidden;}的方式动态修改overflow的属性去停止页面的滚动，但是那时不知道怎么动态修改body的属性，而且如果使用document的方式去修改bod
vue在ios手机上的一些问题（这次写的h5公众号）和后面补充的小程序问题
qq_38337245的博客
11-25 2062
坑一：使用定位fixed，底部导航不显示，代码我就不写，总结就是定位套定位，心累代码太多不想贴； 坑二：禁止页面放大缩小， 解决：Vue 移动端禁止页面放大缩小_fuf_xyxnxss的博客-优快云博客_移动端禁止放大缩小 坑三：移动端h5页面禁止长按选择复制， 解决：移动端h5页面禁止长按选择复制_艾欢欢的博客-优快云博客 坑四：苹果手机IOS点击输入框弹出键盘后，所有按钮点击位置上移， 解决：苹果手机IOS点击输入框弹出键盘后，所有按钮点击位置上移_料峭春风吹酒醒，微冷， 山头斜...
前端面试汇总-React
分享前端工程化、动效魔法与性能之舞！
06-29 1676
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event
爬虫突破封禁的6种常见方法
Beyond_F4的博客
03-15 2155
为何大量网站不能抓取?爬虫突破封禁的6种常见方法在互联网上进行自动数据采集（抓取）这件事和互联网存在的时间差不多一样长。今天大众好像更倾向于用“网络数据采集”，有时会把网络数据采集程序称为网络机器人（bots）。最常用的方法是写一个自动化程序向网络服务器请求数据（通常是用 HTML 表单或其他网页文件），然后对数据进行解析，提取需要的信息。 本文假定读者已经了解如何用代码来抓取一个远程的 URL，...
禁止页面滚动的方法
weixin_34220834的博客
10-22 4312
平时做的大部分禁止页面滚动都是用preventDefault，附上代码function handler() { event.preventDefault();} // 绑定事件document.addEventListener('touchmove', handler, false);// 解绑事件document.removeEventListener('touchmove', handle...
前端禁止页面滚动
weixin_70610368的博客
12-01 1157
2.取消页面禁止滚动。
js禁用页面滚动
weixin_40587866的博客
08-21 528
在JavaScript中，可以通过设置document.body的overflow属性为hidden来禁用页面滚动。以下是实现该功能的示例代码：登录后复制 // 禁用页面滚动 function disableScroll() { document.body.style.overflow = 'hidden'; ...
禁止页面滚动的方法-微信小程序
最新发布
FaxMiao的博客
04-10 1344
在微信小程序中，有几种方法可以禁止页面滚动。
html页面禁止滚轮事件,网页局部滚动时屏蔽全局滚动事件（屏蔽鼠标滚轮事件）...
weixin_35664484的博客
06-04 1114
标题有些绕，其实就是很简单的问题，很多人应该都遇到过，最近优化自动完成的插件，发现在下拉框内容多时出现滚动条的情况下，如果页面本身也有滚动条，就很容易出现两边都滚动的情况，体验非常之差。因为之前没有考虑过此类问题，自信想了下，应该可以通过技术手段避免。一开始想过监听scroll事件，但是发现这样的想法本身就有误区，因为滚动某个元素本身，而要去屏蔽window的滚动，根本说不通，那么换一种思路，既然...
js禁止、允许 页面滚动
tianxianghuiwei的博客
10-30 5027
js禁止页面有两种方式。
H5禁止/启用页面滚动
xuanwuziyou的专栏
06-21 3256
document.addEventListener('touchmove', this.preventTouchMove, false)preventTouchMove(e) { e.stopPropagation() e.preventDefault() }document.removeEventListener('touchmove', this.preventTouchMov...
禁止页面滚动的几种方法
文摘资讯
05-25 2615
overflow:hidden您可以使用 CSS 的 overflow:hidden 属性来防止页面在弹出浮层时滚动。具体来说，可以通过以下步骤实现：在HTML的 标签上添加一个类名，例如 no-scroll。使用 CSS 将该类名与 overflow:hidden 属性关联，这将防止页面滚动，同时也会隐藏滚动条，例如：.no-scroll { overflow: hidden; }当弹出浮层...
html禁止页面滚动
weixin_30852367的博客
10-16 2907
<div @touchmove.prevent></div> @touchmove.prevent //加到标签上禁止滚动 转载于:https://www.cnblogs.com/tomyangym/p/9797003.html
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值