打开视频播放器时防止滚动

Question

我正在使用视频文件将流嵌入到我的网站中，我刚刚发现当视频文件处于“开启”状态时 - 即我点击了一个链接来启动它并使其周围的一切变暗 - 我仍然可以向下滚动查看我的（非暗淡的）网站的其余部分。这打破沉浸，我想禁用滚动，但仅限于视频框打开时。

我不知道从哪里开始。

Answer 1

据我所知，您不能仅使用JavaScript执行此操作，因为onscroll事件为not cancelable。

您可以将所有内容放在容器div中，height和width 100%，并在html和{{1}停用溢出，从而实现此目的。元素，所以你实际上得到容器body上的滚动条。当您的视频播放器打开时，您可以打开隐藏其背后所有内容的叠加层（包括容器上的滚动条），并在其上显示视频框。

div

（你必须弄清楚你元素的位置，但你明白了。）

Answer 2

简单的解决方案是在视频开始播放时添加css body{overflow:hidden;}，之后将其删除。另外，您是否可以将视频框放在div标签中并将其位置设置为固定？

Answer 3

in videobox.js

替换第80行

    this.overlay.setStyles({'top': window.getScrollTop()+'px', 'height': window.getHeight()+'px'});

用这个：

this.overlay.setStyles({top:-$(window).getScroll().y,height:$(window).getScrollSize().y+$(window).getScroll().y});

基本上，这会获得'y'滚动的高度，而不仅仅是屏幕显示的高度。