禁用页面滚动但保留滚动条

Question

如何禁用body的滚动条，但让它在屏幕上保持可见？以Facebook剧院模式为例：

- lucas clemente

---

可能是Just disable scroll not hide it?的重复问题。 - Jordan Running

Answer 1

这是唯一需要的CSS，用于强制显示滚动条：

html{
    overflow-y: scroll;
}

如果内容比窗口小，滚动条将被禁用，因此您需要使用一些脚本将body的大小调整为至少比窗口高度小1px:

$("body").css({ "height" : ($(window).height() - 1) + 'px', "overflow": "hidden" });

- Ricardo Souza

---

这个功能非常好。然而，我发现使用CSS来定义body高度比使用JS更加简洁。经过一些尝试，我找到了两个选项：

1. 将position:fixed;应用于html标签，并添加overflow-y:scroll;
2. 如果您正在使用一个已经在body标签上添加了overflow:hidden的框架（我假设大多数搜索此问题的人都是因为body上有overflow:hidden），那么您可以只使用100vh来定义body高度。

别忘了在模态框关闭时删除这些样式。 - mzrnsh

不错的发现。你应该添加自己的答案，这样我就可以点赞了。 - Ricardo Souza

谢谢，但我还没有完成我的解决方案 :) 我正在尝试将其应用于一个非常长的页面，因此大多数情况下用户会先滚动，然后打开模态框，而我的所有选项都会导致滚动条仍处于活动状态，或者将用户滚动到顶部，然后停用滚动条。我查看了Facebook的做法，他们使用固定位置加上在内容包装器（在他们的情况下不是body）上添加top: xxxxx像素（根据您已经滚动了多远）的方法。完成后，我可能会将其作为答案添加。 - mzrnsh

Answer 2

overflow-y: scroll; 

那应该就是你要找的。

- Chad

---

它不会禁用滚动条。 - Zoltan Toth

这只是始终显示滚动条，但它并没有禁用滚动，对吗？ - lucas clemente

哦，我以为你只是想把滚动条放在那里，即使页面上的内容不足。如果内容比浏览器屏幕还大，你想如何滚动呢？ - Chad

禁用的滚动条只是内容比窗口小的副作用。 - Ricardo Souza

@rcdmk：那Facebook是怎么做到的呢？在黑暗的遮罩下，页面的其余部分仍然可见。 - lucas clemente

请禁用滚动而不是隐藏它。 - Pierre