CSS - 溢出：滚动；- 总是显示垂直滚动条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7492062/
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 - Overflow: Scroll; - Always show vertical scroll bar?
提问by Jambo
So currently I have:
所以目前我有：
#div {
position: relative;
height: 510px;
overflow-y: scroll;
}
However I don't believe that it will be obvious to some users that there is more content there. They could scroll down the page without knowing that my div actually contains a lot more content. I use the height 510px so that it cuts off some text so on some pages it does look like that there is more content, but this doesn't work for all of them.
但是，我不相信对于某些用户来说，那里有更多内容是显而易见的。他们可以在不知道我的 div 实际上包含更多内容的情况下向下滚动页面。我使用高度 510px 以便它切断一些文本，因此在某些页面上看起来确实有更多内容，但这并不适用于所有页面。
I am using a Mac, and in Chrome and Safari the vertical scroll bar will only show when the mouse is over the Div and you actively scroll. Is there a way to always have it displaying?
我使用的是 Mac，在 Chrome 和 Safari 中，垂直滚动条只会在鼠标悬停在 Div 上并且您主动滚动时显示。有没有办法总是让它显示？
回答by NoviceCoding
Just ran into this problem myself. OSx Lion hides scrollbars while not in use to make it seem more "slick", but at the same time the issue you addressed comes up: people sometimes cannot see whether a div has a scroll feature or not.
刚刚自己遇到了这个问题。OSx Lion 在不使用时隐藏滚动条以使其看起来更“光滑”，但同时您解决的问题出现了：人们有时无法看到 div 是否具有滚动功能。
The fix: In your css include -
修复：在你的 css 中包含 -
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
/* always show scrollbars */
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
/* css for demo */
#container {
height: 4em;
/* shorter than the child */
overflow-y: scroll;
/* clip height to 4em and scroll to show the rest */
}
#child {
height: 12em;
/* taller than the parent to force scrolling */
}
/* === ignore stuff below, it's just to help with the visual. === */
#container {
background-color: #ffc;
}
#child {
margin: 30px;
background-color: #eee;
text-align: center;
}<div id="container">
<div id="child">Example</div>
</div>customize the apperance as needed. Source
根据需要自定义外观。来源
回答by Razan Paul
Please note on iPad Safari, NoviceCoding's solution won't work if you have -webkit-overflow-scrolling: touch;somewhere in your CSS.
The solution is either removing all the occurrences of -webkit-overflow-scrolling: touch;or putting -webkit-overflow-scrolling: auto;with
NoviceCoding's solution.
请注意，在 iPad Safari 上，如果您webkit-overflow-scrolling: touch;在 CSS 中的某处安装了NoviceCoding 的解决方案，则该解决方案将不起作用。解决方案是删除所有出现的内容-webkit-overflow-scrolling: touch;或-webkit-overflow-scrolling: auto;使用 NoviceCoding 的解决方案。
回答by JStarcher
This will work with iPad on Safari on iOS 7.1.x from my testing, I'm not sure about iOS 6 though. However, it will not work on Firefox. There is a jQuery plugin which aims to be cross browser compliant called jScrollPane.
根据我的测试，这将适用于 iOS 7.1.x 上的 Safari 上的 iPad，不过我不确定 iOS 6。但是，它不适用于 Firefox。有一个名为jScrollPane的 jQuery 插件旨在跨浏览器兼容。
Also, there is a duplicate post here on Stack Overflowwhich has some other details.
此外，Stack Overflow 上有一个重复的帖子，其中包含一些其他详细信息。
回答by Michelle
This will make the scroll bars always display when there is content within windows that must be scrolled to access, it applies to all windows and all apps on the Mac:
这将使滚动条在窗口中必须滚动才能访问的内容时始终显示，它适用于 Mac 上的所有窗口和所有应用程序：
Launch System Preferences from the ? Apple menu Click on the “General” settings panel Look for ‘Show scroll bars' and select the radiobox next to “Always” Close out of System Preferences when finished
启动系统偏好设置？Apple 菜单单击“常规”设置面板查找“显示滚动条”并选择“始终”旁边的单选框完成后关闭系统偏好设置
