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

which all browsers don't support this please list them too. I think you have to write separate code for browsers like ie to make the scrollbar elegant. — Jibin Francis, Jan 15 '20 at 06:25
Try as mentioned in this link because webkit is suppported by most of browsers and you have write separate code for the rest. https://stackoverflow.com/a/14150577/12147721 — Jibin Francis, Jan 15 '20 at 06:35

score 4 · Answer 1 · answered Jan 15 '20 at 08:14

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

scrollbar-color requires 2 valid colors, so like scrollbar-color: rebeccapurple green; — Ivan Gusev, Apr 08 '22 at 13:32

score 2 · Accepted Answer · answered Jan 15 '20 at 08:43

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.

don't wanna use library but for firefox it worked "scrollbar-width: thin". Thanks — Zain Shabir, Jan 16 '20 at 12:51

score 0 · Answer 3 · answered Jan 15 '20 at 07:40

0

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

answered Jan 15 '20 at 07:40

Sohail Khan

29
7

this is only for chrome, not cross browser. – Zain Shabir Jan 15 '20 at 11:59

Custom scrollbar cross-browser support

3 Answers3

scrollbar-width

scrollbar-color