时间戳

首页 > 解决方案 > 自定义滚动条跨浏览器支持

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

问题描述

在此处输入图像描述
我正在尝试在 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还是什么？请帮我

标签： javascriptjqueryhtmlcssscrollbar

解决方案

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

对于 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 属性是否需要前缀，请始终检查此 链接

推荐阅读