只是禁用滚动不隐藏它？ [英] Just disable scroll not hide it?

问题描述

我在试图在使用Lightbox时禁用父级的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

推荐答案

如果覆盖层下面的页面可以是固定的顶部，当你打开覆盖你可以设置

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屋！