css 局部 滚动条样式

CSS 局部滚动条样式可以让我们在任何元素上定制滚动条，使其更符合我们的设计需求。下面是一个示例：

    .scrollable {
            overflow: auto;
            scrollbar-width: thin;
            scrollbar-color: #dddddd #ffffff;
    }
    .scrollable::-webkit-scrollbar {
            width: 8px;
    }
    .scrollable::-webkit-scrollbar-track {
            background-color: #ffffff;
    }
    .scrollable::-webkit-scrollbar-thumb {
            background-color: #dddddd;
            border-radius: 10px;
    }
    

我们首先为滚动容器添加 overflow: auto; , 这里我们使用了 scrollbar-width: thin; 和 scrollbar-color: #dddddd #ffffff; 来让滚动条更细且颜色更符合我们的需求。

    .scrollable::-webkit-scrollbar {
            width: 8px;
    }

接下来我们使用 ::-webkit-scrollbar 来定制滚动条本身的样式，这里我们让宽度为 8 像素。

    .scrollable::-webkit-scrollbar-track {
            background-color: #ffffff;
    }

我们使用 ::-webkit-scrollbar-track 来修改轨道的颜色，这里我们将它设置为白色。

    .scrollable::-webkit-scrollbar-thumb {
            background-color: #dddddd;
            border-radius: 10px;
    }
    

最后使用 ::-webkit-scrollbar-thumb 来定义滑块样式，并使用 border-radius 让它变圆。这里我们将滑块设置为灰色。

使用 CSS 局部滚动条样式可以让我们更加自由地定制页面滚动条的样式，增强页面风格的统一性。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！