前端修改滚动条样式

原创已于 2022-04-28 23:10:14 修改 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css

于 2022-04-28 22:53:24 首次发布

本文介绍了如何使用CSS为前端网页定制滚动条的样式，包括设置滚动条的宽度、高度、颜色和圆角等属性，以实现更美观的用户体验。示例代码展示了如何改变滚动区域背景、竖向滚动条的外观以及滚动条拇指的样式。

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

前端修改滚动条样式

一、样式代码

代码如下

        &::-webkit-scrollbar {
            width: 4px;
            height: 6px;
          }
          // 滚动区域背景
          &::-webkit-scrollbar-track-piece {
            background-color: rgb(17, 16, 16);
            background-color: white;
            -webkit-border-radius: 6px;
          }
        
          // 竖向滚动条
          &::-webkit-scrollbar-thumb:vertical {
            height: 5px;
            background-color: rgb(70, 68, 68);
            background-color: #AAAAAA;
            -webkit-border-radius: 6px;
          }