Html 使用 CSS 更改滚动条拇指的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26493446/
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
Change size of scrollbar thumb with CSS
提问by Cid-Wings
I want to get a scrollbar with a thumb larger than the track. I can change the color, the opacity, everything, but I don't know how to change the size of the thumbs and the track separately.
我想要一个拇指比轨道大的滚动条。我可以改变颜色，不透明度，一切，但我不知道如何分别改变拇指和轨道的大小。
.custom_scrollbar::-webkit-scrollbar {
width: 1px;
}
.custom_scrollbar::-webkit-scrollbar-track {
background-color: rgb(255, 255, 255);
-webkit-border-radius: 1px;
}
.custom_scrollbar::-webkit-scrollbar-thumb:vertical {
background-color: rgb(142, 142, 142);
-webkit-border-radius: 0px;
-webkit-width:5;
}
.custom_scrollbar::-webkit-scrollbar-thumb:vertical:hover {
background: rgba(0, 245, 255, 0.65);
}
#page {
width: 75%;
overflow-y: scroll;
overflow-x: hidden;
height: 100px;
z-index: 30;
margin: 5%;
padding: 3%;
}<div id="page" class=".custom_scrollbar">
<h1>cool</h1>
<p>text text text text text text text text text text </p>
<p>text text text text text text text text text text </p>
<p>text text text text text text text text text text </p>
<p>text text text text text text text text text text </p>
<p>text text text text text text text text text text </p>
<p>text text text text text text text text text text </p>
<p>text text text text text text text text text text </p>
<p>text text text text text text text text text text </p>
<p>text text text text text text text text text text </p>
<p>text text text text text text text text text text </p>
<p>text text text text text text text text text text </p>
<p>text text text text text text text text text text </p>
<p>text text text text text text text text text text </p>
<p>text text text text text text text text FIN :D </p>
</div>This is what I want it to look like:
这就是我想要的样子：
回答by L-Train
This is a really old post, but I have a working solution that does 'EXACTLY' what was asked for. Also, this will come in handy for anybody else needing this solution.
这是一个非常古老的帖子，但我有一个有效的解决方案，可以“完全”满足要求。此外，这对于需要此解决方案的任何其他人都会派上用场。
/* SCROLLBAR */
/* Let's get this party started */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: rgb(0,0,0);
border: 4px solid transparent;
background-clip: content-box; /* THIS IS IMPORTANT */
}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgb(25,25,25);
border: 1px solid rgb(0,0,0);
}
It is very important to set background-clip: content-box for this to work. You will be left with a track that is thinner than the scroll-bar-thumb. Cheers!!
设置 background-clip: content-box 使其工作非常重要。您将留下一个比滚动条拇指更细的轨道。干杯！！
回答by GibboK
You can setup your size using width in ::-webkit-scrollbar.
您可以使用宽度在::-webkit-scrollbar.
I don't think it is possible to set separately the thumb and track size.
我认为不可能单独设置拇指和轨道大小。
.test {
overflow: auto;
background gray ;
max-height: 500px;
width: 400px;
}
.test::-webkit-scrollbar{
width: 20px;
}
.test::-webkit-scrollbar-track{
background: rgb(41,41,41);
}
::-webkit-scrollbar-thumb{
width: 15px;
background: rgb(111,111,111);
}
回答by Swiftaxe
To make the thumb smaller than the track/scrollbar, simply add a border to the thumb having the same color as the track.
要使拇指小于轨道/滚动条，只需为与轨道颜色相同的拇指添加边框。
http://jsfiddle.net/Swiftaxe/75pmwmfw/
http://jsfiddle.net/Swiftaxe/75pmwmfw/
.wrapper {
overflow: auto;
background: white;
max-height: 90px;
width: 400px;
padding: 20px 30px;
}
.wrapper::-webkit-scrollbar{
width: 18px;
border-radius: 20px;
}
.wrapper::-webkit-scrollbar-track{
background: #CCEEF4;
border-radius: 20px;
}
::-webkit-scrollbar-thumb{
width: 24px;
background: #49AEC0;
border: 5px solid #CCEEF4;
border-radius: 15px;
}<div class="wrapper">
<h1>Scrolling is a Virtue</h1>
<p>Well, it's not the first time. About it! There; keep thy finger on it. This is a cogent vice thou hast here, carpenter; let me feel its grip once. So, so; it does pinch some. Oh, sir, it will break bones—beware, beware! No fear; I like a good grip; I like to feel something in this slippery world that can hold, man.</p>
</div>If the track needs to be transparent one can use background-clip.
如果轨道需要透明，可以使用背景剪辑。
回答by Hitesh Sahu
Another way to do it is assigning border on either side of the track
另一种方法是在轨道的任一侧分配边框
border-left: 3px solid white; border-right: 3px solid white;
border-left: 3px solid white; border-right: 3px solid white;
CSS
CSS
.cute_scroll::-webkit-scrollbar
{
width: 10px;
background-color: #f8bbd0 ;
}
.cute_scroll::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px #f06292 ;
border-radius: 10px;
background-color: #f8bbd0 ;
// Add Border on Track
border-left: 3px solid white;
border-right: 3px solid white;
}
.cute_scroll::-webkit-scrollbar-thumb
{
border-radius: 20px;
-webkit-box-shadow: inset 0 0 px #ad1457 ;
background-color: #e91e63 ;
}
Result
结果
https://codepen.io/hiteshsahu/pen/eGQOwJ
https://codepen.io/hiteshsahu/pen/eGQOwJ
回答by Deep Suthar
Just set border to scroll bar and make both background color and scrollbar border color same, like if your background color is white than set same for scrollbar's border-color.
只需将边框设置为滚动条并使背景颜色和滚动条边框颜色相同，就像您的背景颜色是白色而不是为滚动条的边框颜色设置相同。
p {
width: 400px;
background: #fff;
max-height: 300px;
overflow-y: scroll;
}
/* set border-color of scrollbar and background color of that section same */
::-webkit-scrollbar {
width: 6px;
border: 2px solid #fff;
background: #000;
border-radius: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #000;
border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #888;
}
html:
html：
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
回答by Dmitry
::-webkit-scrollbar-track {
background: url(../../images/scroll-bg.jpg) repeat-y 50%;}
Background is 1px point.
背景是 1px 点。
回答by Jan Swiatecki
::-webkit-scrollbar {
width: 16px;
height: 100%;
}
::-webkit-scrollbar-thumb:vertical {
height: 100px;
}
回答by Fpckalk
You can use a background image to make it look like the scrollbar is smaller than the thumb.
您可以使用背景图像使滚动条看起来比拇指小。
.custom_scrollbar::-webkit-scrollbar {
width: 10px;
}
.custom_scrollbar::-webkit-scrollbar-track-piece {
/* This image is smaller than the width of the scrollbar-thumb */
background: url('scroll-bg.gif') center 0 repeat-y;
}
.custom_scrollbar::-webkit-scrollbar-thumb:vertical {
width: 10px;
border: 2px solid #ffffff;
background-color: #000000;
}