『CSS滚动条 完整兼容』一劳永逸,无副作用

·  阅读 8037
『CSS滚动条 完整兼容』一劳永逸,无副作用

image.png

这是掘金的滚动条,对于掘金的界面风格来说,无伤大雅。

但,还是可以调一下。总所周知!-webkit

webkit

// 窄一点
body::-webkit-scrollbar {
    width: 10px;
    height: 10px; // 顺便写了
}
// 颜色淡一点,圆一点
body::-webkit-scrollbar-thumb {
    background: hsl(0deg 0% 90%);
    border-radius: 5px;
}
复制代码

image.png

这就够了,挺不错的。一切都好,但Firefox不行。

image.png

Firefox

还好Firefox有这个:scrollbar-widthscrollbar-color

html {
    scrollbar-width: thin;
    scrollbar-color: hsl(0deg 0% 90%) transparent;
}
复制代码

image.png

IE

我们看一下IE。

image.png

好的,掘金已经放弃了IE,下一位~

image.png

等等,其实还是可以抢救一下的(但只能设置颜色)

body {
  scrollbar-base-color: green;
  scrollbar-track-color: red;
  scrollbar-arrow-color: blue;
  scrollbar-3dlight-color: yellow;
  scrollbar-shadow-color: pink;
  scrollbar-highlight-color: transparent;
}
复制代码

image.png

一劳永逸

每个div都要专门去写很麻烦?那就一次写完吧。

* {
    scrollbar-width: thin;
    scrollbar-base-color: green;
    scrollbar-track-color: red;
    scrollbar-arrow-color: blue;
}
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-thumb {
    background: hsl(0deg 0% 90%);
    border-radius: 3px;
}
复制代码

优雅一点

那就和老伙计box-sizing放一块

html {
    box-sizing: border-box;
    scrollbar-width: thin;
}

*,
*:before,
*:after {
    box-sizing: inherit;
    scrollbar-width: inherit;
}

// 伪元素无法继承
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-thumb {
    background: hsl(214, 13%, 75%);
    border-radius: 4px;
}
复制代码

image.png

关闭滚动条

为了设计,需要滚掉滚动条,设置none即可

div {
    scrollbar-width: none;
    &::-webkit-scrollbar {
        display: none;
    }
}
复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改