Html div 上的 CSS3 滚动条样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12337821/
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
CSS3 scrollbar styling on a div
提问by Om3ga
How can i style webkit scrollbars with CSS3?
如何使用 CSS3 设置 webkit 滚动条的样式？
I mean these properties
我的意思是这些属性
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
Here is my div tag
这是我的 div 标签
<div class="scroll"></div>
Here is my current CSS
这是我当前的 CSS
.scroll {
width: 200px; height: 400px;
overflow: hidden;
}
回答by Hymantheripper
Setting overflow: hiddenhides the scrollbar. Set overflow: scrollto make sure the scrollbar appears all the time.
设置overflow: hidden隐藏滚动条。设置overflow: scroll以确保滚动条始终出现。
To use the ::webkit-scrollbarproperty, simply target .scrollbefore calling it.
要使用该::webkit-scrollbar属性，只需.scroll在调用它之前定位即可。
.scroll {
width: 200px;
height: 400px;
background: red;
overflow: scroll;
}
.scroll::-webkit-scrollbar {
width: 12px;
}
.scroll::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
.scroll::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
?
See this live example
看到这个现场例子
回答by user2845300
The problem with the css3 scroll bars is that, interaction can only be performed on the content. we can't interact with the scroll bar on touch devices.
css3 滚动条的问题是，交互只能在内容上进行。我们无法与触摸设备上的滚动条进行交互。
回答by Meisam Mulla
.scroll {
width: 200px; height: 400px;
overflow: auto;
}
回答by Bojangles
You're setting overflow: hidden. This will hide anything that's too large for the <div>, meaning scrollbars won't be shown. Give your <div>an explicit width and/or height, and change overflowto auto:
你正在设置overflow: hidden。这将隐藏对 来说太大的任何内容<div>，这意味着不会显示滚动条。给你<div>一个明确的宽度和/或高度，并更改overflow为auto：
.scroll {
width: 200px;
height: 400px;
overflow: scroll;
}
If you only want to show a scrollbar if the content is longer than the <div>, change overflowto overflow: auto. You can also only show one scrollbar by using overflow-yor overflow-x.
如果您只想在内容长于 时显示滚动条<div>，请更改overflow为overflow: auto。您也可以使用overflow-y或仅显示一个滚动条overflow-x。
