小编典典

如何禁用滚动而不隐藏它?

all

我正在尝试在使用灯箱时禁用父级的 html/body 滚动条。这里的主要词是 disable 。我 不想overflow: hidden;.

这样做的原因是overflow: hidden使站点跳转并占据了滚动所在的区域。

我想知道是否可以在显示滚动条的同时禁用它。


阅读 78

收藏
2022-05-29

共1个答案

小编典典

如果覆盖层下的页面可以“固定”在顶部,当你打开覆盖层时你可以设置

body { position: fixed; overflow-y:scroll }

您仍然应该看到正确的滚动条,但内容不可滚动。当您关闭覆盖时,只需使用

body { position: static; overflow-y:auto }

我只是提出这种方式只是因为您不需要更改任何滚动事件

更新

您还可以做一点改进:如果您document.documentElement.scrollTop在图层打开之前通过 javascript
获取该属性,您可以将该值动态分配为topbody 元素的属性:使用这种方法,无论您是否使用这种方法,页面都会保持原位重新在顶部,或者如果您已经滚动。

CSS

.noscroll { position: fixed; overflow-y:scroll }

JS

$('body').css('top', -(document.documentElement.scrollTop) + 'px')
         .addClass('noscroll');
2022-05-29