jQuery 水平仅 webkit 滚动条样式 css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20713769/
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
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-27 01:16:26 来源:igfitidea点击:
horizontal only webkit scrollbar style css
提问by user3106579
this is custom scrollbar in css
这是 css 中的自定义滚动条
/* Gmail style scrollbar */
::-webkit-scrollbar {
width: 12px
}
::-webkit-scrollbar-thumb {
border-width: 1px 1px 1px 2px
}
::-webkit-scrollbar-track {
border-width: 0
}
::-webkit-scrollbar {
height: 16px;
overflow: visible;
width: 16px;
}
::-webkit-scrollbar-button {
height: 0;
width: 0;
}
::-webkit-scrollbar-track {
background-clip: padding-box;
border: solid transparent;
border-width: 0 0 0 4px;
}
::-webkit-scrollbar-track:horizontal {
border-width: 4px 0 0
}
::-webkit-scrollbar-track:hover {
background-color: rgba(220, 172, 0, .05);
box-shadow: inset 1px 0 0 rgba(220, 172, 0, .1);
}
::-webkit-scrollbar-track:horizontal:hover {
box-shadow: inset 0 1px 0 rgba(220, 172, 0, .1)
}
::-webkit-scrollbar-track:active {
background-color: rgba(220, 172, 0, .05);
box-shadow: inset 1px 0 0 rgba(220, 172, 0, .14), inset -1px 0 0 rgba(220, 172, 0, .07);
}
::-webkit-scrollbar-track:horizontal:active {
box-shadow: inset 0 1px 0 rgba(220, 172, 0, .14), inset 0 -1px 0 rgba(220, 172, 0, .07)
}
::-webkit-scrollbar-thumb {
background-color: rgba(220, 172, 0, .2);
background-clip: padding-box;
border: solid transparent;
border-width: 1px 1px 1px 6px;
min-height: 28px;
padding: 100px 0 0;
box-shadow: inset 1px 1px 0 rgba(220, 172, 0, .1), inset 0 -1px 0 rgba(220, 172, 0, .07);
}
::-webkit-scrollbar-thumb:horizontal {
border-width: 6px 1px 1px;
padding: 0 0 0 100px;
box-shadow: inset 1px 1px 0 rgba(220, 172, 0, .1), inset -1px 0 0 rgba(220, 172, 0, .07);
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(220, 172, 0, .4);
box-shadow: inset 1px 1px 1px rgba(220, 172, 0, .25);
}
::-webkit-scrollbar-thumb:active {
background-color: rgba(220, 172, 0, 0.5);
box-shadow: inset 1px 1px 3px rgba(220, 172, 0, 0.35);
}
::-webkit-scrollbar-track {
border-width: 0 1px 0 6px
}
::-webkit-scrollbar-track:horizontal {
border-width: 6px 0 1px
}
::-webkit-scrollbar-track:hover {
background-color: rgba(220, 172, 0, .035);
box-shadow: inset 1px 1px 0 rgba(220, 172, 0, .14), inset -1px -1px 0 rgba(220, 172, 0, .07);
}
::-webkit-scrollbar-thumb {
border-width: 0 1px 0 6px
}
::-webkit-scrollbar-thumb:horizontal {
border-width: 6px 0 1px
}
::-webkit-scrollbar-corner {
background: transparent
}
body::-webkit-scrollbar-track-piece {
background-clip: padding-box;
background-color: #f5f5f5;
border: solid #fff;
border-width: 0 0 0 3px;
box-shadow: inset 1px 0 0 rgba(220, 172, 0, .14), inset -1px 0 0 rgba(220, 172, 0, .07);
}
body::-webkit-scrollbar-track-piece:horizontal {
border-width: 3px 0 0;
box-shadow: inset 0 1px 0 rgba(220, 172, 0, .14), inset 0 -1px 0 rgba(220, 172, 0, .07);
}
body::-webkit-scrollbar-thumb {
border-width: 1px 1px 1px 5px
}
body::-webkit-scrollbar-thumb:horizontal {
border-width: 5px 1px 1px
}
body::-webkit-scrollbar-corner {
background-clip: padding-box;
background-color: #f5f5f5;
border: solid #fff;
border-width: 3px 0 0 3px;
box-shadow: inset 1px 1px 0 rgba(220, 172, 0, .14);
}<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>I use the above code to beautify my scroll bar, but I do not want to style my vertical bar.
我使用上面的代码来美化我的滚动条，但我不想设置我的垂直条的样式。
I tried to remove the tags which don't contain 'horizontal' but it doesn't work.
我试图删除不包含“水平”的标签，但它不起作用。
回答by user2357975
For horizontal scroll bar set height
为水平滚动条设置高度
::-webkit-scrollbar{
width: 12px;
height: 12px;
}
回答by ITWitch
Once you've set the css for
一旦你为
::-webkit-scrollbar{}
both the horizontal and vertical bars are automatically affected.
水平和垂直条都会自动受到影响。
If you want the horizontal bar to look different from the vertical bar, you will have to set separate CSS for each, like this:
如果您希望水平条看起来与垂直条不同，则必须为每个设置单独的 CSS，如下所示：
::-webkit-scrollbar-thumb:horizontal {
background-color:#5B0B2B;
}
::-webkit-scrollbar-thumb:horizontal:hover{
background-color:#B31252;
border: solid 1px #5B0B2B;
}
::-webkit-scrollbar-thumb:vertical {
background-color:#2A8894;
}
::-webkit-scrollbar-thumb:vertical:hover {
background-color:#32BFD1;
border: solid 1px #2A8894;
}
Here's a complete JSFiddle Demo.
这是一个完整的JSFiddle Demo。
