我试图禁用父母的html/身体滚动条，而我正在使用一个灯箱。这里的主要词是disable。我不想用溢出来隐藏它。
这样做的原因是overflow: hidden会使站点跳转并占用原来滚动的区域。
我想知道是否有可能禁用滚动条，同时仍然显示它。
当前回答
所有基于javascript的modal/lightbox系统在html标签或body标签上显示modal/lightbox时都会使用溢出。
当lightbox显示时，js会推送一个隐藏在html或body标签上的溢出。 当lightbox被隐藏时，有些人会删除隐藏的，有些人会在html或body标签上推一个溢出自动。
在Mac上工作的开发人员没有看到滚动条的问题。
只需替换隐藏的unset不看到内容滑动下的模式删除滚动条。
Lightbox开放/显示:
<html style="overflow: unset;"></html>
Lightbox隐藏/关闭:
<html style="overflow: auto;"></html>
其他回答
<div id="lightbox">在<body>元素中，因此当你滚动lightbox时，你也会滚动body。解决方案是不要将<body>元素扩展到100%以上，将长内容放在另一个div元素中，并在需要时使用overflow: auto为这个div元素添加滚动条。
html { 高度:100% ｝ 身体{ 保证金:0; 高度:100% ｝ #内容{ 高度:100%; 溢出:汽车; ｝ # lightbox { 位置:固定; 上图:0; 左:0; 右:0; 底部:0; ｝ < html > 身体< > <div id="content">much content</div> . < div id = " lightbox " > lightbox < div > 身体< / > < / html >
现在，滚动灯箱(以及主体)没有效果，因为主体不超过屏幕高度的100%。
我是OP
在fcalderan回答的帮助下，我能够形成一个解决方案。我把我的解决方案留在这里，因为它带来了如何使用它的清晰度，并增加了一个非常重要的细节，宽度:100%;
我添加了这个类
body.noscroll
{
position: fixed;
overflow-y: scroll;
width: 100%;
}
这对我很有用，我用的是fantyapp。
如果覆盖层下的页面可以“固定”在顶部，当你打开覆盖层时，你可以设置
.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));
我之所以建议采用这种方式，只是因为您不需要更改任何滚动事件
另一个在固定模式上摆脱内容跳转的解决方案是，当删除主体滚动时，将页面宽度归一化:
body {width: 100vw; overflow-x: hidden;}
然后你可以玩固定位置或溢出:隐藏的身体时，模式是开放的。但它会隐藏水平滚动条-通常他们不需要响应式网站。
我已经做了这个函数，用JS解决了这个问题。 这个原则可以很容易地扩展和定制，这对我来说是一个很大的优势。
使用这个js DOM API函数:
const handleWheelScroll = (element) => (event) => {
if (!element) {
throw Error("Element for scroll was not found");
}
const { deltaY } = event;
const { clientHeight, scrollTop, scrollHeight } = element;
if (deltaY < 0) {
if (-deltaY > scrollTop) {
element.scrollBy({
top: -scrollTop,
behavior: "smooth",
});
event.stopPropagation();
event.preventDefault();
}
return;
}
if (deltaY > scrollHeight - clientHeight - scrollTop) {
element.scrollBy({
top: scrollHeight - clientHeight - scrollTop,
behavior: "smooth",
});
event.stopPropagation();
event.preventDefault();
return;
}
};
简而言之，如果滚动要滚动给定元素(您想要滚动的元素)之后的其他内容，则此函数将停止事件传播和默认行为。
然后你可以像这样把它勾起来和解开:
const wheelEventHandler = handleWheelScroll(elementToScrollIn);
window.addEventListener("wheel", wheelEventHandler, {
passive: false,
});
window.removeEventListener("wheel", wheelEventHandler);
注意，它是一个高阶函数，所以必须保持对给定实例的引用。
我在鼠标进入中挂钩addEventListener部分，在鼠标离开事件中取消挂钩removeEventListener，但你可以随心所欲地使用它。
