js 弹层下面的body禁止滚动

最新推荐文章于 2025-03-13 10:26:51 发布
最新推荐文章于 2025-03-13 10:26:51 发布
阅读量5.1k 收藏 6
点赞数
分类专栏： HTML5 javascript 文章标签： html 弹框下body禁止滚动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guxiansheng1991/article/details/80503497
版权

当弹出出现的时候,设置body的position为fixed,并设置overflow为hidden

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

当弹层取消

document.body.style.position = 'relative';
document.body.style.overflow = 'auto';
弹出弹窗后，如何禁止底层的body滚动，适用于超长的页面
凝视深渊
01-04 4万+
常见场景 从event target入手 还是直接干body吧 conclusion 常见场景 在许多填写表单的页面中，都会弹出一个选择器，让你在弹窗中选择项目。有时，弹窗本身容纳不下内容，需要让它不断滚动来展示，但因为事件是冒泡的，有时就会造成底部（body 的Z-index肯定是在下面的 ）的内容也在滚动。这内外一起滚，就有点尴尬了。 举例，下面两张图里，都有类似的问题。那
移动端js弹出层滚动的时候 body层不可滚动的解决办法
热门推荐
一个程序媛
12-07 1万+
最近在做移动端网站，在点击导航栏，弹出导航列表时，出现了问题。下滑列表时底层body也跟着滚动，连查带想的折腾了两天才解决这个问题。下面主要分享一下解决办法以及关键代码。一、有的网友建议弹出层弹出时给 html 和 body 都加上“height：100%；overflow：hidden；”，然而在手机上并没有什么卵用二、结合弹出层加上“overflow-y：auto”依然不起作用三、加上touch
js实现鼠标滑动到某个div禁止滚动
10-14
主要为大家详细介绍了js实现鼠标滑动到某个div禁止滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS禁止滚动条滚动
drakseason的博客
08-07 2516
我们在写项目时候可能会遇到这样一种效果：点击按钮，弹出一个对话框，此时只能在框内操作，此时滚动条消失并禁止滚动或是这样的。
阻止弹窗滚动穿透到body，支持pc和手机端
最新发布
小漠007的专栏
03-13 253
【代码】阻止弹窗滚动穿透到body，支持pc和手机端。
vue滚动条禁止_js禁止和开启滚动条事件
weixin_39863155的博客
01-30 1434
开发移动端页面的时候有一个很比较常见的需求，在出现弹窗时，禁止滑动弹窗后面的主体页面。如何实现呢，往下看js实现整个页面禁止滚动：document.body.addEventListener('touchmove',function(e){e.preventDefault();},{passive:false});passive是干吗用的呢，设置该属性的目的主要是为了在阻止事件默认行...
js禁用页面滚动
weixin_40587866的博客
08-21 411
在JavaScript中，可以通过设置document.body的overflow属性为hidden来禁用页面滚动。以下是实现该功能的示例代码：登录后复制 // 禁用页面滚动 function disableScroll() { document.body.style.overflow = 'hidden'; ...
js禁止滚动条滚动
xiasnn的博客
10-12 1万+
方法一：将body设置为fixed（滚动条会消失，页面会抖动，比较麻烦） //弹层背景滑动问题 var top1 = 0; function stopBodyScroll(isFixed) { var bodyEl = document.body if (isFixed) { top1 = window.scrollY bodyEl.style.position =
vue 弹层弹起 底部内容禁止滚动 并且保留当前高度
郝峰vip的博客
12-23 358
前沿 这是一个通用的需求，当页面提示框弹起禁止下边的内容滚动，并且保留滚动到的当前的高度，我是在vue公共的方法中写的，全局通用。 第一步：先在你的公共css里边写入这个样式 .dialog-open { position: fixed; width: 100%; left: 0; top: 0; } 第二步 ：在你的公共js里边写入这个方法，导入全局，现在还不知道怎么注册全局...
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
11-23
样式中需要对IE6、7及其它浏览器用hack辨别，这是因为当页面拉到下面时如果html或body被overflow:hidden，透明弹层下面的页面就会被部分正常隐藏，通过透明看到的一片的灰度，具体颜色跟平台及用户设置背景色有关。...
js 弹层，背景灰化不可用效果
07-26
"js 弹层，背景灰化不可用效果"是这种设计的一种具体实现，它通过JavaScript技术和CSS样式来达到弹出层出现时，背景页面被灰化并失去焦点的效果，从而引导用户专注于弹层内容。这里我们将深入探讨如何使用JavaScript...
js阻止移动端页面滚动的两种方法
10-20
本文主要介绍了js阻止移动端页面滚动的两种方法。具有很好的参考价值，下面跟着小编一起来看下吧
JS遮罩层完美弹出Div(滚动条不可动)
12-11
用JS遮罩层完美弹出Div，并且滚动条完美屏蔽掉。。绝对是您完美的学习例子
js 禁止鼠标滚动
webmazha的博客
05-06 1645
window.onload=function(){ var oDiv=document.getElementById("top"); oDiv.onmouseover = function () { if(window.event){ document.onmousewheel = function () {
js禁止页面滚动
不求甚解的博客
03-03 1万+
在web页面中，经常遇到一些弹窗内部有滚动条，可以滚动，弹窗后面的文档流也可以滚动，两个滚动区域会相互影响，用户体验不太好。 1、弹出弹窗，禁止滚动 const disableScroll = (domId) => { var scrollTopVal = document.documentElement.scrollTop || document.body.scrollTop; // 禁止滑动 const selectdom = domId || 'app'; document
js得禁止页面滚动
xiaohua0708day的博客
01-20 1175
在web页面中，经常遇到一些弹窗内部有滚动条，可以滚动，弹窗后面的文档流也可以滚动，两个滚动区域会相互影响，用户体验不太好。1、弹出弹窗，禁止滚动，并停留在当前位置。2、关闭弹窗，恢复滚动，并恢复在停留位置。方案一、封装禁止、允许滚动方法。
js禁止滚动条滚动并且隐藏滚动条
boy火巨的博客
03-14 7224
禁止鼠标滑过滚动条滚动 document.body.onmousewheel = function () {return false;} 恢复鼠标滑过滚动条滚动 document.body.onmousewheel = function () {return true;} 禁止键盘控制滚动条滚动 document.body.onkeydown = function (e) { ...
弹层弹出下方禁止滚动
Luckyzhoufangbing的博客
02-26 394
document.body.style.overflow = 'hidden' document.body.style.height = '100%' document.documentElement.style.overflow = 'hidden' // 弹层消失，下方恢复滚动 document.body.style.overflow = 'scroll' document.docu...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值