如何禁用滚动而不隐藏它? [英] How to disable scroll without hiding it?

问题描述

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

I'm trying to disable the html/body scrollbar of the parent while I'm using a lightbox. The main word here is disable. I do not want to hide it with overflow: hidden;.

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

The reason for this is that overflow: hidden makes the site jump and take up the area where the scroll was.

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

I want to know if its possible to disable a scrollbar while still showing it.

推荐答案

如果overlayer下的页面可以固定"在顶部，打开overlay时可以设置

If the page under the overlayer can be "fixed" at the top, when you open the overlay you can set

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

您仍应看到正确的滚动条，但内容不可滚动.当您关闭叠加层时，只需使用

you should still see the right scrollbar but the content is not scrollable. When you close the overlay just revert these properties with

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

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

I just proposed this way only because you wouldn't need to change any scroll event

更新

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

You could also do a slight improvement: if you get the document.documentElement.scrollTop property via javascript just before the layer opening, you could dynamically assign that value as top property of the body element: with this approach the page will stand in its place, no matter if you're on top or if you have already scrolled.

CSS

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

JS

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

这篇关于如何禁用滚动而不隐藏它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！