使用css优化页面横向/纵向滚动条样式

最新推荐文章于 2025-06-21 14:13:50 发布

原创最新推荐文章于 2025-06-21 14:13:50 发布 · 2.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

前端专栏收录该内容

20 篇文章

订阅专栏

该文章展示了如何使用CSS和Less预处理器来定制网页滚动条的样式，包括改变其颜色、宽度、轨道和悬停时的效果。提供了针对纵向和横向滚动条的特定样式设置，以及如何限制样式只在当前页面生效的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

优化后：

仅设置纵向

<style lang="less" scoped>

/* 改变滚动条的颜色 */
* {
    scrollbar-width: thin;
    scrollbar-color: #999 #F5F5F5;
}
*::-webkit-scrollbar {
    background-color: #F5F5F5;
    width: 10px;
}
*::-webkit-scrollbar-thumb {
    background-color: #999;
    border-radius: 5px;
}

/* 改变滚动条被悬停时的颜色 */
*::-webkit-scrollbar-thumb:hover {
    background-color: #666;
}

/* 改变滚动条的轨道宽度和颜色 */
*::-webkit-scrollbar-track {
    background-color: #F5F5F5;
    border-radius: 5px;
}

</style>

仅设置横向

<style  lang="less" scoped>

/deep/ .el-table--scrollable-x .el-table__body-wrapper {
  overflow-x: scroll;
}
/deep/.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar{
    background-color: #F5F5F5;
    height: 10px;
    width: 5px;
} 

/deep/.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb{
  background-color: #b3c0d1;
  height: 11px;
    border-radius: 15px;
}

</style>