我试图禁用父母的html/身体滚动条，而我正在使用一个灯箱。这里的主要词是disable。我不想用溢出来隐藏它。
这样做的原因是overflow: hidden会使站点跳转并占用原来滚动的区域。
我想知道是否有可能禁用滚动条，同时仍然显示它。
当前回答
我是OP
在fcalderan回答的帮助下，我能够形成一个解决方案。我把我的解决方案留在这里，因为它带来了如何使用它的清晰度，并增加了一个非常重要的细节，宽度:100%;
我添加了这个类
body.noscroll
{
position: fixed;
overflow-y: scroll;
width: 100%;
}
这对我很有用，我用的是fantyapp。
其他回答
如果覆盖层下的页面可以“固定”在顶部，当你打开覆盖层时，你可以设置
body {
position: fixed;
overflow-y:scroll
}
您应该仍然可以看到右边的滚动条，但是内容是不可滚动的。当你关闭覆盖时，只需恢复这些属性
body {
position: static;
overflow-y:auto
}
我之所以建议采用这种方式，只是因为您不需要更改任何滚动事件
如果我已经滚动了页面呢?
如果你在层打开之前通过javascript获得document.documentElement.scrollTop属性，你可以动态地将该值赋给body元素的top属性:通过这种方法，页面将保持当前的滚动位置，无论你是在顶部还是已经滚动了。
Css
.noscroll {
position: fixed;
inline-size: 100%;
overflow-y:scroll
}
JS
$('body').css('top', -(document.documentElement.scrollTop) + 'px')
.addClass('noscroll');
你可以用Javascript来做:
// Classic JS
window.onscroll = function(ev) {
ev.preventDefault();
}
// jQuery
$(window).scroll(function(ev) {
ev.preventDefault();
}
然后当你的灯箱关闭时禁用它。
但如果你的灯箱包含滚动条，你将无法在它打开时滚动。这是因为window包含了body和#lightbox。 所以你必须使用像下面这样的架构:
<body>
<div id="global"></div>
<div id="lightbox"></div>
</body>
然后只在#global上应用onscroll事件。
这对我来说真的很好....
// disable scrolling
$('body').bind('mousewheel touchmove', lockScroll);
// enable scrolling
$('body').unbind('mousewheel touchmove', lockScroll);
// lock window scrolling
function lockScroll(e) {
e.preventDefault();
}
只需用决定何时锁定滚动的任何东西来包装这两行代码。
e.g.
$('button').on('click', function() {
$('body').bind('mousewheel touchmove', lockScroll);
});
如果覆盖层下的页面可以“固定”在顶部，当你打开覆盖层时，你可以设置
.disableScroll { position: fixed; overflow-y:scroll }
将这个类提供给可滚动的主体，您仍然应该看到正确的滚动条，但内容是不可滚动的。
用jquery来保持页面的位置
$('body').css('top', - ($(window).scrollTop()) + 'px').addClass('disableScroll');
当你关闭覆盖时，只需恢复这些属性
var top = $('body').position().top;
$('body').removeClass('disableScroll').css('top', 0).scrollTop(Math.abs(top));
我之所以建议采用这种方式，只是因为您不需要更改任何滚动事件
我有一些其他固定的元素在页面和设置主体的位置固定导致了一堆其他问题，所以我做了一个hack的方式:
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
// on opening modal
document.body.style.overflow = "hidden"
document.body.style.paddingRight = `${scrollbarWidth}px`
// on closing modal
document.body.style.overflow = "unset",
document.body.style.paddingRight = "0px"
这个想法是添加一个与浏览器滚动条宽度相同的右填充，以模仿假滚动条并防止内容移动。
