Custom scrollbar cross-browser support

Question

I am trying to create custom scrollbar in css, but It's not cross-browser, I wanna make it cross-browser with javascript. Scrollbar is not in body tag. Scrollbar is in card box (categories). Here is the screenshot:
Click here to see screenshot
Here is my html code:

<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 Code:

.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);
}

I've tried this, but it's not cross-browser. Can someone please tell me, how can i make it support to all browsers? Js or anything? Please help me

Answer 1

you have to add different styles for different browsers. There is no one simple styling for all browsers

For 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);
}

For Firefox:

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

One more thing. CSS property

 box-shadow

can be used without -webkit- prefix. To be sure if CSS property needs prefix always check this link

Answer 2

It is better to use javascript for scrollbars since they are not fully supported by all browsers. those libraries are examples to use:

• Simple-scrollbar
• SimpleBar

The following example uses simpleBar . see documentation above for options.

 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>

However standards have come with New properties but they are supported only for firefox .

Can I Use is a website to check support of a property check here

scrollbar-width

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

scrollbar-width accepts the following values:

• auto is the default value and will render the standard scrollbars for the user agent.
• thin will tell the user agent to use thinner scrollbars, when applicable.

• none will hide the scrollbar completely, without affecting the element's scrollability.

• <length> is being debated, but (if added) would be a maximum width of the scrollbar.

---

scrollbar-color

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

scrollbar-color accepts the following values:

• auto is the default value and will render the standard scrollbar colors for the user agent.
• dark will tell the user agent to use darker scrollbars to match the current color scheme.

• light will tell the user agent to use lighter scrollbars to match the current color scheme.

• <color> specifies two colors to be used for the scrollbar. The first color is for the "thumb" or the moveable part of the scrollbar which appears on top. The second color is for the "track" or the fixed portion of the scrollbar.

---

So use combinantion of ::-webkit-scrollbar prefixes for chrome and supported properties listed above for firefox to customize, otherwise it is better to use js to assure that your styles are working cross-browser.

Answer 3

Can you please Try this one 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;
}