用纯css设置Firefox火狐浏览器的滚动条样式

时间：2024-02-24 13:05:46

设置Firefox滚动条样式的css属性只有 scrollbar-color 和 scrollbar-width 这两个。看名字就知道第一个是设置滚动条颜色的，第二个是设置滚动条(竖直方向)宽度，(水平方向)高度的。

在Firefox中设置滚动条的样式

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>在Firefox中设置滚动条的样式</title>
    <style>
        .wrap{
            height: 300px;
            width: 300px;
            background-color: #e9f;
            overflow: scroll;
            scrollbar-color: red #0ff;
            scrollbar-width: 88px;
        }
        .inner{
            height: 500px;
            width: 500px;
            background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="inner"></div>
    </div>
</body>
</html>

效果：用Firefox打开应该能看到红色的滚动滑块和天蓝色的滑动插槽。

scrollbar-color的语法

/*
scrollbar-color: auto | dark | light | <color>{2};
*/
scrollbar-color: auto; /* 使用浏览器默认的滚动条样式 */
scrollbar-color: dark; /* 使用浏览器默认的深色或者黑色滚动效果 */
scrollbar-color: light; /* 使用浏览器默认的浅色滚动效果  */
scrollbar-color: red #00f; /* 第一个颜色为滚动条的颜色， 第二个颜色为滚动条轨道的颜色  */

scrollbar-width的语法

/*
sscrollbar-width: auto | thin | none | <width>;
*/
scrollbar-width: auto; /* 使用浏览器默认的滚动宽度 */
scrollbar-width: thin; /* 设置比默认滚动条宽度更窄的宽度 */
scrollbar-width: none; /* 隐藏滚动条，但是元素还是可以滚动  */
scrollbar-width: 66px; /* 直接设置滚动条的宽度，比如 60px 3vh 4wh 5rem 6rm 等长度 */

只对Firefox高于64以上的版本有效
Firefox低版本可以用jquery.nicescroll这个插件做兼容。具体用法可以看文档。都9102年了，估计低版本的Firefox已经没啥人使用了。

参考：

overflow：https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow

Scrollbars：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Scrollbars

scrollbar-color：https://developer.mozilla.org/zh-CN/docs/Web/CSS/scrollbar-color

scrollbar-width：https://developer.mozilla.org/zh-CN/docs/Web/CSS/scrollbar-width

jquery.nicescroll: https://www.npmjs.com/package/jquery.nicescroll

相关文章