我正在尝试使用灯箱时禁用父级的html / body滚动条。这里的主要词是 disable 。我也 没有 想隐藏它overflow: hidden;。
overflow: hidden;
这样做的原因是overflow: hidden使站点跳转并占据了滚动条所在的区域。
overflow: hidden
我想知道是否有可能在仍然显示它的同时禁用滚动条。
如果覆盖层下的页面可以在顶部“固定”,则在打开覆盖层时可以设置
body { position: fixed; overflow-y:scroll }
您仍应看到右侧的滚动条,但内容不可滚动。当您关闭叠加层时,只需还原这些属性即可
body { position: static; overflow-y:auto }
我之所以这样提议只是因为您不需要更改任何滚动事件
更新资料
您还可以做些微的改进:如果document.documentElement.scrollTop在打开图层之前通过javascript 获得属性,则可以将该值动态分配为topbody元素的属性:通过这种方法,无论您是否在重新位于顶部或您是否已滚动。
document.documentElement.scrollTop
top
CSS
.noscroll { position: fixed; overflow-y:scroll }
JS
$('body').css('top', -(document.documentElement.scrollTop) + 'px') .addClass('noscroll');