自定义滚动条跨浏览器支持

Question

我正在尝试在 css 中创建自定义滚动条，但它不是跨浏览器，我想用 javascript 让它跨浏览器。 滚动条不在正文标记中。 滚动条位于卡框（类别）中。 这是屏幕截图：
点击这里查看截图
这是我的html代码：

<section class="quickSearch">
    <div class="quickSearchWrapper">
        <div class="container">
            <div class="quickSearch-header">
                <div class="fw-5">Quick Search</div>
                <a href="#">View All</a>
            </div>
            <div class="quickSearch-body">
                <div class="quickSearch-categories"> // Here is am placing overflow scrollbar 'x axis'
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">Creative</a>
                    </div>
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">Landing Page</a>
                    </div>
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">eCommerce</a>
                    </div>
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">Education</a>
                    </div>
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">Real Estate</a>
                    </div>
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">Corporate</a>
                    </div>
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">Agency</a>
                    </div>
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">Portfolio</a>
                    </div>
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">Restaurants</a>
                    </div>
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">Jewellery</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

CSS代码：

.quickSearchWrapper{
    position: relative;
    overflow: hidden;
}
.quickSearchWrapper .quickSearch-body .quickSearch-categories{
    display: flex;
    overflow: auto;
}
.quickSearch-categories::-webkit-scrollbar {
    width: 5px; 
    height: 7px;
}
.quickSearch-categories::-webkit-scrollbar-thumb {
    background-color: #1e202a;
    outline: 1px solid #1e202a;
}
.quickSearch-categories::-webkit-scrollbar-thumb {
    border-radius: 50px;
}
.quickSearch-categories::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
}

我试过这个，但它不是跨浏览器。 有人可以告诉我，我怎样才能让它支持所有浏览器？ js还是什么？ 请帮我

Answer 1

您必须为不同的浏览器添加不同的样式。 没有一种适用于所有浏览器的简单样式

对于 Chrome 和 Safari：

::-webkit-scrollbar {
  width: 5px; 
  height: 7px;
}

::-webkit-scrollbar-thumb {
  background-color: #1e202a;
  outline: 1px solid #1e202a;
  border-radius: 50px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
}

对于火狐：

@-moz-document url-prefix() {
  .scroller {
    scrollbar-width: thin;
    scrollbar-color: #1e202a;
  }
}

还有一件事。 CSS 属性

 box-shadow

可以在没有 -webkit- 前缀的情况下使用。 要确定 CSS 属性是否需要前缀，请始终检查此链接

Answer 2

最好将javascript用于滚动条，因为并非所有浏览器都完全支持它们。 这些库是使用的示例：

• 简单滚动条
• 简单条

以下示例使用simpleBar 。 有关选项，请参阅上面的文档。

 new SimpleBar(document.getElementById('container'));

 #container { width: 300p; height: 350px; border: 1px solid #eee; } .text { text-align: center; padding: 100px 50px; }

 <link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css" /> <div id="container"> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <script src="https://unpkg.com/simplebar@latest/dist/simplebar.min.js"></script>

然而，标准带有新属性，但仅支持firefox 。

Can I Use是一个在此处检查是否支持财产检查的网站

滚动条宽度

    scrollbar-width: auto | thin | none | <length>;

scrollbar-width接受以下值：

• auto是默认值，将为用户代理呈现标准滚动条。
• 如果适用， thin将告诉用户代理使用更薄的滚动条。

• none将完全隐藏滚动条，而不会影响元素的可滚动性。

• <length>正在辩论中，但（如果添加）将是滚动条的最大宽度。

---

滚动条颜色

    scrollbar-color: auto | dark | light | <color>;

scrollbar-color接受以下值：

• auto是默认值，将为用户代理呈现标准滚动条颜色。
• dark将告诉用户代理使用更暗的滚动条来匹配当前的配色方案。

• light会告诉用户代理使用更light滚动条来匹配当前的配色方案。

• <color>指定用于滚动条的两种颜色。 第一种颜色用于“拇指”或出现在顶部的滚动条的可移动部分。 第二种颜色用于“轨道”或滚动条的固定部分。

---

因此，结合使用::-webkit-scrollbar前缀的 chrome 和上面列出的支持 firefox 的属性进行自定义，否则最好使用js来确保您的样式可以跨浏览器工作。

Answer 3

你能试试这个 CSS

body::-webkit-scrollbar {
  width: 1em;
}

body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}