我试图禁用父母的html/身体滚动条，而我正在使用一个灯箱。这里的主要词是disable。我不想用溢出来隐藏它。
这样做的原因是overflow: hidden会使站点跳转并占用原来滚动的区域。
我想知道是否有可能禁用滚动条，同时仍然显示它。
当前回答
另一个在固定模式上摆脱内容跳转的解决方案是，当删除主体滚动时，将页面宽度归一化:
body {width: 100vw; overflow-x: hidden;}
然后你可以玩固定位置或溢出:隐藏的身体时，模式是开放的。但它会隐藏水平滚动条-通常他们不需要响应式网站。
其他回答
如果覆盖层下的页面可以“固定”在顶部，当你打开覆盖层时，你可以设置
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');
粗糙但有效的方法是强制滚动回顶部，从而有效地禁用滚动:
var _stopScroll = false;
window.onload = function(event) {
document.onscroll = function(ev) {
if (_stopScroll) {
document.body.scrollTop = "0px";
}
}
};
打开灯箱时升起旗子，关闭灯箱时降下旗子。
现场测试用例。
我喜欢坚持使用“overflow: hidden”方法，只需添加与滚动条宽度相等的右填充。
通过lostsource获取滚动条宽度函数。
function getScrollbarWidth() {
var outer = document.createElement("div");
outer.style.visibility = "hidden";
outer.style.width = "100px";
outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps
document.body.appendChild(outer);
var widthNoScroll = outer.offsetWidth;
// force scrollbars
outer.style.overflow = "scroll";
// add innerdiv
var inner = document.createElement("div");
inner.style.width = "100%";
outer.appendChild(inner);
var widthWithScroll = inner.offsetWidth;
// remove divs
outer.parentNode.removeChild(outer);
return widthNoScroll - widthWithScroll;
}
当显示覆盖时，在html中添加"noscroll"类，并在body中添加padding-right:
$(html).addClass("noscroll");
$(body).css("paddingRight", getScrollbarWidth() + "px");
当隐藏时，删除类和填充:
$(html).removeClass("noscroll");
$(body).css("paddingRight", 0);
noscroll样式是这样的:
.noscroll { overflow: hidden; }
注意，如果你有任何带有position:fixed的元素，你也需要为这些元素添加填充。
<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%。
这是我们的解。简单地保存覆盖打开时的滚动位置，在用户试图滚动页面时滚动回保存的位置，并在覆盖关闭时关闭侦听器。
它在IE上有点不稳定，但在Firefox/Chrome上却很有魅力。
var body = $("body"), overlay = $("#overlay"), overlayShown = false, overlayScrollListener = null, overlaySavedScrollTop = 0, overlaySavedScrollLeft = 0; function showOverlay() { overlayShown = true; // Show overlay overlay.addClass("overlay-shown"); // Save scroll position overlaySavedScrollTop = body.scrollTop(); overlaySavedScrollLeft = body.scrollLeft(); // Listen for scroll event overlayScrollListener = body.scroll(function() { // Scroll back to saved position body.scrollTop(overlaySavedScrollTop); body.scrollLeft(overlaySavedScrollLeft); }); } function hideOverlay() { overlayShown = false; // Hide overlay overlay.removeClass("overlay-shown"); // Turn scroll listener off if (overlayScrollListener) { overlayScrollListener.off(); overlayScrollListener = null; } } // Click toggles overlay $(window).click(function() { if (!overlayShown) { showOverlay(); } else { hideOverlay(); } }); /* Required */ html, body { margin: 0; padding: 0; height: 100%; background: #fff; } html { overflow: hidden; } body { overflow-y: scroll; } /* Just for looks */ .spacer { height: 300%; background: orange; background: linear-gradient(#ff0, #f0f); } .overlay { position: fixed; top: 20px; bottom: 20px; left: 20px; right: 20px; z-index: -1; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, .3); overflow: auto; } .overlay .spacer { background: linear-gradient(#88f, #0ff); } .overlay-shown { z-index: 1; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h1>Top of page</h1> <p>Click to toggle overlay. (This is only scrollable when overlay is <em>not</em> open.)</p> <div class="spacer"></div> <h1>Bottom of page</h1> <div id="overlay" class="overlay"> <h1>Top of overlay</h1> <p>Click to toggle overlay. (Containing page is no longer scrollable, but this is.)</p> <div class="spacer"></div> <h1>Bottom of overlay</h1> </div>
