我试图禁用父母的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));
我之所以建议采用这种方式，只是因为您不需要更改任何滚动事件
其他回答
包含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();
所有基于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>
另一个在固定模式上摆脱内容跳转的解决方案是，当删除主体滚动时，将页面宽度归一化:
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');
这对我来说真的很好....
// 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);
});
