如何在Angular中调整自定义滚动条的尺寸

你要调整的绿色部分是滚动条滑块，对应::-webkit-scrollbar-thumb伪元素，按以下方法调整尺寸即可：

调整方案 #

WebKit内核浏览器（Chrome、Edge、Safari等）的滚动条尺寸控制规则如下：

1. 滚动条整体尺寸由::-webkit-scrollbar定义：
   • 垂直滚动条的宽度由width属性控制
   • 水平滚动条的高度由height属性控制
     滑块的最大尺寸不能超过这里定义的数值
2. 滑块（绿色部分）的尺寸单独在::-webkit-scrollbar-thumb中设置：
   • 垂直滚动条调整滑块高度：添加min-height/height属性
   • 水平滚动条调整滑块宽度：添加min-width/width属性

完整示例代码 #

::-webkit-scrollbar {
    width: 15px; /* 垂直滚动条整体宽度 */
    height: 15px; /* 水平滚动条整体高度，不需要水平滚动条可删除 */
}

::-webkit-scrollbar-track {
    background: #eee; /* 轨道背景样式可自定义 */
}

::-webkit-scrollbar-thumb {
    background: #2ecc71; /* 绿色滑块的颜色 */
    border-radius: 7px;
    min-height: 60px; /* 垂直滚动条滑块最小高度，按需修改数值即可 */
    min-width: 60px; /* 水平滚动条滑块最小宽度，不需要水平滚动条可删除 */
}

补充说明 #

如果需要适配Firefox浏览器，使用以下专属属性即可：

* {
    scrollbar-width: 15px; /* 滚动条整体宽度 */
    scrollbar-color: #2ecc71 #eee; /* 依次为滑块颜色、轨道颜色 */
}

内容的提问来源于stack exchange，提问作者Yogesh Nikam