适配主流浏览器的自定义滚动条样式

JuneTT

于 2024-07-02 15:44:34 发布

阅读量247

点赞数 2

文章标签：前端 css3 html5

本文链接：https://blog.csdn.net/czdbgsy/article/details/140128711

版权

--moz-跟 -moz- 还有display:-webkit-box; 都未生效，使用了js适配，如果有其他方案可以评论出来

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <title>Custom Scrollbar</title>
    <style>
        .scrollBox{
            height: 400px;
            width: 300px;
            margin: 200px auto;
            overflow-y: scroll;
            outline: 1px solid red;
            /* 在火狐浏览器中未起作用 */
            /*--moz-scrollbar-width: thin;*/
            /*--moz-scrollbar-color: #F90 #F5F5F5;*/

        }
        .scrollBox::-webkit-scrollbar{
            width: 6px;
            background-color: transparent;
        }
        .scrollBox::-webkit-scrollbar-thumb{
            background-color: rgba(0,0,0,.2);
            border-radius: 50% / 5px;
        }
        .content{
            height: 1000px;
        }
        .fixFirefox{
            scrollbar-width: thin;
            scrollbar-color: #F90 transparent;
        }
    </style>
</head>
<body>
    <div class="scrollBox" >
        <div class="content">
            <!-- 内容 -->
        </div>
    </div>
</body>
<script>
    if(navigator.userAgent.includes('Firefox')){
        document.querySelector('.scrollBox').classList.add('fixFirefox');
    }
</script>
</html>