javascript - Custom scrollbar cross-browser support - Stack Overflow

admin管理员组

文章数量:1291073

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

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

• javascript
• jquery
• html
• css
• scrollbar

Share Improve this question Follow edited Jan 15, 2020 at 9:10 Suraj-Ui 19622 silver badges1414 bronze badges asked Jan 15, 2020 at 6:07 Zain ShabirZain Shabir 45511 gold badge77 silver badges1818 bronze badges 2

• 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 Commented Jan 15, 2020 at 6:25
• Try as mentioned in this link because webkit is suppported by most of browsers and you have write separate code for the rest. stackoverflow./a/14150577/12147721 – Jibin Francis Commented Jan 15, 2020 at 6:35

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

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./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./simplebar@latest/dist/simplebar.min.js"></script>

However standards have e 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 pletely, 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 binantion 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.

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

本文标签： javascriptCustom scrollbar crossbrowser supportStack Overflow