CSS 使滚动条在 div 中始终可见 - chrome
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35663653/
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
make a scrollbar always visible in a div - chrome
提问by devdropper87
I've implemented infinite scrolling for the first time, but I can't get the scrollbar to show up initially when there is no overflow. I tried this in chrome:
我第一次实现了无限滚动，但是当没有溢出时，我无法让滚动条最初显示出来。我在 chrome 中试过这个：
#scrollarea-invalid {
overflow-y: scroll !important;
height: 350px;
}
how can I make the scrollbar always show up in this div, even if the content is less than 350px in this div?
如何使滚动条始终显示在此 div 中，即使此 div 中的内容小于 350px？
采纳答案by trex005
Just having the scrollbar visible will not allow you to react to the user trying to scroll down. So you will need to actually make the content flow outside of the area and detect the scroll. Try this :
仅让滚动条可见将无法让您对尝试向下滚动的用户做出反应。因此，您需要实际使内容流到该区域之外并检测滚动。尝试这个 ：
#scrollarea-invalid {
overflow-y: scroll;
height: 350px;
}
#scrollarea-content{
min-height:101%;
}<div id='scrollarea-invalid'>
<div id='scrollarea-content'></div>
</div>回答by Cumulo Nimbus
body {
padding: 10px;
}
ul {
max-height:150px;
overflow:scroll;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}<ul>
<li>This is some content</li>
<li>This is some content</li>
<li>This is some content</li>
<li>This is some content</li>
<li>This is some content</li>
<li>This is some content</li>
<li>This is some content</li>
<li>This is some content</li>
<li>This is some content</li>
<li>This is some content</li>
<li>This is some content</li>
<li>This is some content</li>
</ul>回答by Fitriani Razak
I have the same problem on my page, where to see videoslist we have to scroll. I was afraid that the visitor think that there only one video.
我的页面上有同样的问题，我们必须滚动查看视频列表的位置。我害怕访客认为只有一个视频。
Using ::-webkit-scrollbar and ::-webkit-scrollbar-thumb is the proven solution.
使用 ::-webkit-scrollbar 和 ::-webkit-scrollbar-thumb 是经过验证的解决方案。
