Scroll (scroll bar) with the same look in multiple browsers

Question

I have the scrollbar in this style in the browser google Chrome, but in mozila and on the internet explore the visual ends up not picking up. It is possible to mount the scroll bar without using plugin for these two other browsers in the same style?

::-webkit-scrollbar {
    width: 7px !important;
    height: 7px !important;
}

::-webkit-scrollbar-track {
    background: $white-color;
}

::-webkit-scrollbar-thumb {
    background: $light-grey;
    border-radius: 5px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: $super-light-grey;
}

Answer 1

The styling of scrollbar with -webkit-scrollbar is a unique feature for Webkit-based browsers (such as Safari) and Blink-based browsers (such as Chrome and Chromium).

For modern browsers probably in the future (https://drafts4.csswg.org/css-scrollbars-1/#scrollbar-color) will use scrollbar-color and scrollbar-width, but for now is only accepted in browsers based on Firefox

Example of use to customize all Scrolls, including in elements with overflow:auto and overflow:scroll:

html, html * {
    scrollbar-color: rgba(0,0,0,.2) #dfdfdf;
    scrollbar-width: thin;
}

Property scrollbar-color:

scrollbar-color: <cor do thumb/elemento que arrasta> <cor do track/barra>;

Property scrollbar-width:

The scrollbar-width only accepts 3 values, thin, auto, none

It’s important to note that on macOS you need to enable to customize.

You can combine these properties with the properties ::-webkit-scrollbar-* to have some similar customization, example:

html, html * {
    scrollbar-color: rgba(0,0,0,.2) #dfdfdf;
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    background-color: #dfdfdf;
    width: 6px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.2);
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0,0,0,.5);
}

This is probably the most you’ll get from customization

---

Internet Explorer (legacy)

Just to mention, until version 8 of Internet Explorer the following properties were supported:

Estate	Description
scrollbar-3dlight-color	Sets the color of the top and left edges of the scroll box and the scroll arrows of a scroll bar
scrollbar-arrow-color	Sets the color of the arrow elements of a scrolling arrow
scrollbar-base-color	Sets the color of the main elements of a scroll bar, which include the scroll box, track and scroll arrows
scrollbar-darkshadow-color	Sets the gutter color of a scroll bar
scrollbar-face-color	Sets the color of the scroll box and scroll arrows of a scroll bar
scrollbar-highlight-color	Sets the color of the top and left edges of the scroll box and the scroll arrows of a scroll bar
scrollbar-shadow-color	Sets the color of the bottom and right edges of the scroll box and the scroll arrows of a scroll bar.
scrollbar-track-color	Sets the color of the track element of a scroll bar

---

Personal opinion about styling certain things

I fully understand this fascination with visually embellishing certain things, but really certain customizations are sometimes not as pleasant as app developers, computer programs and web pages think they will be. For example, Linux-based distro users usually customize their operating system quite visually, which is usually close to their liking for use, including the scrollbars of any program, so by the time we’ve customized a web page, that will be different from the usual end user, we end up by "break the mood" that the user is used to/wants.

I understand that it is not so common in Windows the customization of scrollbars, perhaps at the time of Windows98se and Windowsme was common (although more limited to colors) and so people end up finding such customization interesting, for those who are used to browsing several sites is just something visually beautiful, but for people with less familiarity, who can even become customers on "a site" maybe make these "miniscrollbars" is something that will complicate much in the user experience.