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

Question

我正在尝试在 css 中创建自定义滚动条，但它不是跨浏览器，我想用 javascript 使其跨浏览器。滚动条不在 body 标签中。滚动条位于卡片盒（类别）中。这是屏幕截图：
单击此处查看屏幕截图
这是我的 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

最好使用 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将告诉用户代理使用较浅的滚动条来匹配当前的配色方案。

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

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