Css滚动条高度没减少

您好，最近我遇到了一个奇怪的问题，就是在使用CSS样式设计滚动条时，滚动条的高度并没有减少。

/* CSS代码 */
::-webkit-scrollbar {
width: 5px;
height: 10px;
}
::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
background-color: #1c1c1c;
border-radius: 5px;
}

根据上面的代码，我的滚动条应该是宽度为5px，高度为10px，滑块背景色为黑色，颜色为白色的圆角矩形。结果却发现，滑块的高度并没有减少，依然是默认的值。

在经过不断的查找后，终于找到了问题所在，原来是我没有给滑块添加高度：

/* 修正后的代码 */
::-webkit-scrollbar {
width: 5px;
height: 10px;
}
::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
background-color: #1c1c1c;
border-radius: 5px;
height: 50px; /* 添加高度 */
}

现在，我的滑块高度已经减少了，滚动条也很好看了。

这个问题的产生，其实是因为我太注重宽度而忽略了高度，所以，在使用CSS设计滚动条时，我们要全方位的考虑，才能做出完美的滚动条。

谢谢您的阅读，希望对您有所帮助。

查看更多关于Css滚动条高度没减少的详细内容...