我试图禁用父母的html/身体滚动条，而我正在使用一个灯箱。这里的主要词是disable。我不想用溢出来隐藏它。
这样做的原因是overflow: hidden会使站点跳转并占用原来滚动的区域。
我想知道是否有可能禁用滚动条，同时仍然显示它。
当前回答
如果覆盖层下的页面可以“固定”在顶部，当你打开覆盖层时，你可以设置
.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));
我之所以建议采用这种方式，只是因为您不需要更改任何滚动事件
其他回答
我注意到YouTube网站就是这么做的。所以通过检查它一点，我已经能够确定他们正在使用@聚合物/铁覆盖-行为，幸运的是，它可以在web组件/聚合物之外使用:
import {
pushScrollLock,
removeScrollLock,
} from '@polymer/iron-overlay-behavior/iron-scroll-manager';
// lock scroll everywhere except scrollElement
pushScrollLock(scrollElement);
// restore scrolling
removeScrollLock(scrollElement);
允许滚动选定的元素 不会以任何方式干扰样式 是否在YouTube网站上进行了实战测试
这似乎是一个成熟的解决方案，当然也是我能找到的最好的解决方案。包装有点重，但我猜大部分都是分开的，当只进口铁卷轴管理器。
干杯
你可以用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事件。
如果覆盖层下的页面可以“固定”在顶部，当你打开覆盖层时，你可以设置
.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));
我之所以建议采用这种方式，只是因为您不需要更改任何滚动事件
包含jQuery:
禁用
$.fn.disableScroll = function() {
window.oldScrollPos = $(window).scrollTop();
$(window).on('scroll.scrolldisabler',function ( event ) {
$(window).scrollTop( window.oldScrollPos );
event.preventDefault();
});
};
启用
$.fn.enableScroll = function() {
$(window).off('scroll.scrolldisabler');
};
使用
//disable
$("#selector").disableScroll();
//enable
$("#selector").enableScroll();
在公认的解决方案基础上增加了四个小补充:
Apply 'noscroll' to html instead of to body to prevent double scroll bars in IE To check if there's actually a scroll bar before adding the 'noscroll' class. Otherwise, the site will also jump pushed by the new non-scrolling scroll bar. To keep any possible scrollTop so the entire page doesn't go back to the top (like Fabrizio's update, but you need to grab the value before adding the 'noscroll' class) Not all browsers handle scrollTop the same way as documented at http://help.dottoro.com/ljnvjiow.php
完整的解决方案，似乎适用于大多数浏览器:
CSS
html.noscroll {
position: fixed;
overflow-y: scroll;
width: 100%;
}
禁用滚动
if ($(document).height() > $(window).height()) {
var scrollTop = ($('html').scrollTop()) ? $('html').scrollTop() : $('body').scrollTop(); // Works for Chrome, Firefox, IE...
$('html').addClass('noscroll').css('top',-scrollTop);
}
启用滚动
var scrollTop = parseInt($('html').css('top'));
$('html').removeClass('noscroll');
$('html,body').scrollTop(-scrollTop);
感谢法布里齐奥和德扬把我带到了正确的轨道上，感谢布罗丁戈解决了双滚动条的问题
