更改谷歌浏览器滚动条样式

最新推荐文章于 2024-03-15 16:41:57 发布

KAMHUNCHAN

最新推荐文章于 2024-03-15 16:41:57 发布

阅读量1k

点赞数 3

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/KAMHUNCHAN/article/details/124410048

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

修改全局滚动条：

            &::-webkit-scrollbar {
              width: 6px;
              height: 6px;
              background: transparent;
            }

            &::-webkit-scrollbar-thumb {
              background: transparent;
              border-radius: 4px;
            }

            &:hover::-webkit-scrollbar-thumb {
              background: hsla(0, 0%, 53%, 0.4);
            }

            &:hover::-webkit-scrollbar-track {
              background: hsla(0, 0%, 53%, 0.1);
            }

修改某个滚动条：在前面加上一个类选择器，如下：

            .test::-webkit-scrollbar {
              width: 6px;
              height: 6px;
              background: transparent;
            }

            .test::-webkit-scrollbar-thumb {
              background: transparent;
              border-radius: 4px;
            }

            .test:hover::-webkit-scrollbar-thumb {
              background: hsla(0, 0%, 53%, 0.4);
            }

            .test:hover::-webkit-scrollbar-track {
              background: hsla(0, 0%, 53%, 0.1);
            }