使用CSS更改滚动条缩略图的大小 [英] Change size of scrollbar thumb with CSS

问题描述

我想要一个大拇指大于滚动条的滚动条。
我可以改变颜色，不透明度，一切，但我不知道如何分别改变大拇指和轨道的大小。

  .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指数：30;保证金：5％; padding：3％;}  

 < div id = pageclass =。custom_scrollbar> < h1>酷< / h1> < p>文字文字文字文字文字文字文字文字文字文字< / p> < p>文字文字文字文字文字文字文字文字文字文字< / p> < p>文字文字文字文字文字文字文字文字文字文字< / p> < p>文字文字文字文字文字文字文字文字文字文字< / p> < p>文字文字文字文字文字文字文字文字文字文字< / p> < p>文字文字文字文字文字文字文字文字文字文字< / p> < p>文本文本文本文本文本文本文本文本文本文本< / p> < p>文字文字文字文字文字文字文字文字文字文字< / p> < p>文字文字文字文字文字文字文字文字文字文字< / p> < p>文字文字文字文字文字文字文字文字文字文字< / p> < p>文字文字文字文字文字文字文字文字文字文字< / p> < p>文字文字文字文字文字文字文字文字文字文字< / p> < p>文字文字文字文字文字文字文字文字文字文字< / p> < p>文字文字文字文字文字文字文字文字FIN：D< / p>< / div>  

这是我想让它看起来像：

解决方案

code> :: - webkit-scrollbar 。

我不认为可以单独设置缩略图和轨道大小。

http://jsfiddle.net/rvcfmun7/

  .test {
 overflow：auto; 
 background grey; 
 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）; 
} 
  

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:

解决方案

You can setup your size using width in ::-webkit-scrollbar.

I don't think it is possible to set separately the thumb and track size.

http://jsfiddle.net/rvcfmun7/

.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);
}

这篇关于使用CSS更改滚动条缩略图的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！