javascript - 只是禁用滚动不隐藏它？(Just disable scroll not hide it?)

Question

I'm trying to disable the html/body scrollbar of the parent while I'm using a lightbox.

(我正在尝试在使用灯箱时禁用父级的html / body滚动条。)

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.

(原因是overflow: hidden使网站跳转并占据滚动区域。)

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

(我想知道是否可以在显示时禁用滚动条。)

  ask by Dejan.S translate from so

Answer 1

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

(我之所以提出这种方式只是因为你不需要改变任何滚动事件)

Update

(更新)

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.

(您还可以稍微改进一下：如果您在图层打开之前通过javascript获取document.documentElement.scrollTop属性，则可以动态地将该值指定为body元素的top属性：使用此方法页面将代替它，无论你是在顶部还是已经滚动过。)

Css

(CSS)

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

JS

(JS)

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