Html 使主滚动条始终可见
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1202425/
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
Making the main scrollbar always visible
提问by Deniz Dogan
What CSS is required to make the browser's vertical scrollbar remain visible when a user visits a web page (when the page hasn't enough content to trigger the scrollbar's activation)?
当用户访问网页时（当页面没有足够的内容触发滚动条激活时），需要什么 CSS 才能使浏览器的垂直滚动条保持可见？
回答by Corv1nus
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
This make the scrollbar always visible and only active when needed.
这使滚动条始终可见并且仅在需要时才处于活动状态。
Update: If the above does not work the just using this may.
更新：如果上述方法不起作用，则可以使用它。
html {
overflow-y:scroll;
}
回答by molls223
Make sure overflow is set to "scroll" not "auto." With that said, in OS X Lion, overflow set to "scroll" behaves more like auto in that scrollbars will still only show when being used. So if any the solutions above don't appear to be working that might be why.
确保溢出设置为“滚动”而不是“自动”。话虽如此，在 OS X Lion 中，设置为“滚动”的溢出的行为更像自动，因为滚动条仍然只会在使用时显示。因此，如果上述任何解决方案似乎不起作用，那可能就是原因。
This is what you'll need to fix it:
这是您需要修复的内容：
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
You can style it accordingly if you don't like the default.
如果您不喜欢默认设置，可以相应地设置样式。
回答by Ionu? G. Stan
html {
overflow-y: scroll;
}
Is that what you want?
那是你要的吗？
Unfortunately, Opera 9.64 seems to ignore that CSS declaration when applied to HTMLor BODY, although it works for other block-level elements like DIV.
不幸的是，Opera 9.64 在应用于HTML或时似乎忽略了该 CSS 声明BODY，尽管它适用于其他块级元素，例如DIV。
回答by Frank L?mmer
Things have changed in the last years. The answers above are not valid in all cases any more. Apple is pushing disappearing scrollbarseverywhere. Safari, Chrome and even Firefox on MacOs (and iOs) only show scrollbars when actually scrolling — I don't know about current Windows/IE. However there are non-standard ways to style scroll barson Webkit (IE dropped that a long time ago).
在过去的几年里，情况发生了变化。以上答案不再适用于所有情况。苹果正在到处推动消失的滚动条。MacO（和 iO）上的 Safari、Chrome 甚至 Firefox 仅在实际滚动时显示滚动条——我不知道当前的 Windows/IE。然而，有一些非标准的方法可以在 Webkit 上设置滚动条的样式（IE 很久以前就放弃了）。
回答by Marco Demaio
html {height: 101%;}
I use this cross browsers solution(note: I always use DOCTYPE declaration in 1st line, I don't know if it works in quirksmode, never tested it).
我使用这个跨浏览器解决方案（注意：我总是在第一行使用 DOCTYPE 声明，我不知道它是否适用于 quirksmode，从未测试过）。
This will always show an ACTIVE vertical scroll barin every page, vertical scrollbar will be scrollable only of few pixels.
这将始终在每个页面中显示一个 ACTIVE 垂直滚动条，垂直滚动条只能滚动几个像素。
When page contents is shorterthan browser's visible area (view port) you will still see the vertical scrollbar active, and it will be scrollable only of few pixels.
当页面内容比浏览器的可见区域（视口）短时，您仍然会看到垂直滚动条处于活动状态，并且它只能滚动几个像素。
In case you are obsessed with CSS validation (I'm obesessed only with HTML validation) by using this solution your CSS code would also validate for W3C because you are not using non standard CSS attributes like -moz-scrollbars-vertical
如果您通过使用此解决方案对 CSS 验证着迷（我只对 HTML 验证着迷），您的 CSS 代码也将针对 W3C 进行验证，因为您没有使用非标准 CSS 属性，例如 -moz-scrollbars-vertical
回答by Scott
body { height:101%; }will "crop" larger pages.
body { height:101%; }将“裁剪”较大的页面。
Instead, I use:
相反，我使用：
body { min-height:101%; }
回答by lunelson
An alternative approach is to set the width of the html element to 100vw. On many if not most browsers, this negates the effect of scrollbars on the width.
另一种方法是将 html 元素的宽度设置为 100vw。在许多（如果不是大多数）浏览器上，这会抵消滚动条对宽度的影响。
html { width: 100vw; }
回答by Jazzepi
I was able to get this to work by adding it to the body tag. Was nicer for me because I don't have anything on the html element.
我能够通过将它添加到 body 标签来让它工作。对我来说更好，因为我在 html 元素上没有任何内容。
body {
overflow-y: scroll;
}
回答by Lolo
body {
min-height: 101vh;
}
works the best for me
最适合我
回答by Stian
I do this:
我这样做：
html {
margin-left: calc(100vw - 100%);
margin-right: 0;
}
Then I don't have to look at the ugly greyed out scrollbar when it's not needed.
然后我不必在不需要时查看丑陋的灰色滚动条。
