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

最新推荐文章于 2023-03-14 16:08:54 发布

原创最新推荐文章于 2023-03-14 16:08:54 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

3 篇文章

订阅专栏

修改全局滚动条：

            &::-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);
            }