Html 使用CSS更改滚动条拇指的大小

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

.custom\u滚动条：：-webkit滚动条{
宽度：1px；
}
.custom_滚动条：--webkit滚动条轨迹{
背景色：rgb（255、255、255）；
-webkit边界半径：1px；
}
.custom_滚动条：：-webkit滚动条拇指：垂直{
背景色：rgb（142142142）；
-webkit边界半径：0px；
-网络工具包宽度：5；
}
.custom_滚动条：：-webkit滚动条拇指：垂直：悬停{
背景：rgba（0245255,0.65）；
}
#页面{
宽度：75%；
溢出y：滚动；
溢出x：隐藏；
高度：100px；
z指数：30；
利润率：5%；
填充：3%；
}

凉爽的
文本文本文本文本文本文本文本文本文本文本文本

文本文本文本文本文本文本文本文本文本文本文本

文本文本文本文本文本文本文本文本文本文本文本

文本文本文本文本文本文本文本文本文本文本文本

文本文本文本文本文本文本文本文本文本文本文本

文本文本文本文本文本文本文本文本文本文本文本

文本文本文本文本文本文本文本文本文本文本文本

文本文本文本文本文本文本文本文本文本文本文本

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

文本文本文本文本文本文本文本文本文本文本文本

文本文本文本文本文本文本文本文本文本文本文本

文本文本文本文本文本文本文本文本文本文本文本

文本文本文本文本文本文本文本文本文本文本文本

文本文本FIN:D

您可以使用

：-webkit滚动条中的宽度设置尺寸

我认为不可能单独设置拇指和音轨的大小


可以使用背景图像使滚动条看起来比拇指小


.custom\u滚动条：：-webkit滚动条{
宽度：10px；
}
.custom_scrollbar:：-webkit scrollbar轨迹条{
/*此图像小于滚动条拇指的宽度*/
背景：url（'scroll-bg.gif'）中心0重复-y；
}
.custom_滚动条：：-webkit滚动条拇指：垂直{
宽度：10px；
边框：2个实心#ffffff；
背景色：#000000；
}
要使拇指比音轨/滚动条小，只需在拇指上添加与音轨颜色相同的边框即可



.wrapper{
溢出：自动；
背景：白色；
最大高度：90px；
宽度：400px；
填充：20px 30px；
}
.wrapper:：-webkit滚动条{
宽度：18px；
边界半径：20px；
}
.wrapper:：-webkit滚动条轨迹{
背景#CCEEF4；
边界半径：20px；
}
：-webkit滚动条拇指{
宽度：24px；
背景#49AEC0；
边框：5px实心#CCEEF4；
边界半径：15px；
}

滚动是一种美德
这不是第一次了。关于它！那里把你的手指放在上面。木匠，这是你的一个明显缺点；让我感受一下它的紧握。那么,那么,；它确实会夹一些。哦，先生，它会折断骨头的当心，当心！没有恐惧；我喜欢握得好；我喜欢在这个滑溜溜的世界里感觉到某种东西能支撑住，伙计

这是一篇非常古老的文章，但我有一个有效的解决方案，它“完全”满足了我的要求。此外，对于需要此解决方案的任何其他人来说，这都会派上用场


设置背景剪辑：内容框以使其正常工作非常重要。将留下一条比滚动条拇指更细的轨迹。干杯

::-webkit-scrollbar-track {
background: url(../../images/scroll-bg.jpg) repeat-y 50%;}

背景是1px点。
另一种方法是在轨迹两侧指定边界

::-webkit-scrollbar {
    width: 16px;
    height: 100%;
}

::-webkit-scrollbar-thumb:vertical {
    height: 100px;
}

CSS

结果


只需将边框设置为滚动条，并使背景色和滚动条边框颜色相同，就像您的背景色为白色，而不是将滚动条的边框颜色设置为相同

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:

“Lorem ipsum door sit amet，一位杰出的献身者，他是一位临时劳工和职业经理人。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔不轻率的行为外，还必须为自己的行为负责。”
西塞罗于公元前45年撰写的《德菲尼布斯·博诺鲁姆和马洛鲁姆》第1.10.32节
“对于所有的错误，我们都要清楚地认识到这一点，这是因为我们需要赞美、尊重他人、尊重发明者的真实性和准建筑师的生命。Nemo enim ipsam Voluptate是一个有着丰富经验的人，他是一个理性的人。最重要的一点是，在劳动和就业领域，所有人都有自己的权利、义务和义务。但是最低限度的成本，是否需要在实验室中进行实际操作，是否需要从消费品中获得流动性？“你是否有权利在一个自由的环境中为他人辩护？你是否有权利在一个自由的环境中为他人辩护？”

谢谢你的回答这真的不可能；）绿色检查这很有帮助，也很有教育意义OP希望拇指比音轨大，而不是小。令人惊讶的是，我没有经常在这个网站上看到thx！答案！^^绿色检查也很神奇，但是有没有办法降低滚动条音轨的高度？这不是在做什么据我在Chrome中看到的OP所需。拇指不比音轨大。拇指和音轨的大小都相同，不符合OP的要求
::-webkit-scrollbar {
    width: 16px;
    height: 100%;
}

::-webkit-scrollbar-thumb:vertical {
    height: 100px;
}

  border-left: 3px solid white;
  border-right: 3px solid white;

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

}

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

<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>