纯css修改滚动条样式颜色

最新推荐文章于 2025-11-24 14:59:14 发布

原创最新推荐文章于 2025-11-24 14:59:14 发布 · 6.2k 阅读

1 ·

CC 4.0 BY-SA版权

css3 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何使用CSS对网页中的滚动条进行个性化定制，包括滚动条的颜色、宽度及高度等属性，帮助开发者实现美观且实用的滚动效果。

::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-button {
background-color: #FF7677;
display: none
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.7)
}
::-webkit-scrollbar-thumb {
background:#717276; //滚动条颜色
border-radius: 4px;
}
::-webkit-scrollbar-corner {
background: #82AFFF;
display: none
}
::-webkit-scrollbar-resizer {
background: #FF0BEE;
}
::scrollbar {
width: 8px;
height: 8px;
}
::scrollbar-button {
background-color: #FF7677;
display: none
}
::scrollbar-track {
background: rgba(255, 255, 255, 0.7)
}
::scrollbar-thumb {
background: #aaa;
border-radius: 4px;
}
::scrollbar-corner {
background: #82AFFF;
display: none
}
::scrollbar-resizer {
background: #FF0BEE;
}