Javascript 用于强制浏览器显示滚动条的 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13864549/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS for forcing the browser to display scrollbar
提问by Nickel
I've written a web application and found that when I resize the page, the browser doesn't display it's own scrollbar as the window shrinks. This prevents the user from accessing content. I've set my body width to 500px and set the navbar to white-space:nowrap. How can I get the browser to recognize that there is content to the right of the screen?
我编写了一个 Web 应用程序，发现当我调整页面大小时，当窗口缩小时，浏览器不会显示它自己的滚动条。这会阻止用户访问内容。我已将身体宽度设置为 500px 并将导航栏设置为white-space:nowrap. 如何让浏览器识别屏幕右侧有内容？
Just to clarify I want the browser's scrollbar and not a scroll bar on any control.
只是为了澄清我想要浏览器的滚动条而不是任何控件上的滚动条。
回答by Ardeshir P.
You can use one of the following depending on whether you want horizontal, vertical, or both scrollbars to be added:
您可以使用以下选项之一，具体取决于您是要添加水平、垂直还是同时添加两个滚动条：
body {overflow-x:scroll;}
body {overflow-y:scroll;}
body {overflow:scroll;}
However, I think if you show the content in a section and then do
但是，我认为如果您在一个部分中显示内容然后执行
#id-of_your_div {overflow:scroll;}
So that you add scroll to the div rather than force the browser to show scrollbars, then your page will provide a much better user experience since such scrollbars are easier for users to access.
这样您将滚动添加到 div 而不是强制浏览器显示滚动条，那么您的页面将提供更好的用户体验，因为这样的滚动条更易于用户访问。
回答by span
You can set the height or width of the body/element to 100.1% depending on which direction and element you want to have scrollable.
您可以将主体/元素的高度或宽度设置为 100.1%，具体取决于您想要滚动的方向和元素。
回答by Sparky
Instead of playing with the width, use the code that was intended for this purpose. The following CSS will force a scroll-bar to be present whether it's needed or not.
不要使用宽度，而是使用专门用于此目的的代码。无论是否需要，以下 CSS 将强制显示滚动条。
for both scroll-bars...
对于两个滚动条...
body {
overflow: scroll;
}
or just for a horizontal scroll-bar...
或仅用于水平滚动条...
body {
overflow-x: scroll;
}
