Changing the Scrollbars' Style

How to change the scrollbar styling via javaScript

Here is my solution:

The idea is to create a CSS stylesheet rule dynamically and update it while scrolling.

Here is the snippet I used to test in stackoverflow itself (by running it from the console directly):

// Based on https://stackoverflow.com/a/31126328/1941313
appendRule = (sheet) => {
  console.log({sheet});
  const len = sheet.cssRules.length;
  sheet.insertRule('body{}', len);
  return sheet.cssRules[len];
}

ruleForScroll = appendRule(Array.from(document.styleSheets).slice(-1)[0]);

randomColor = () => Math.floor(255 * Math.random());

component = document.querySelector('.left-sidebar--sticky-container.js-sticky-leftnav');

component.addEventListener("scroll", function wheelStyle() {
    ruleForScroll.selectorText = '.left-sidebar--sticky-container.js-sticky-leftnav::-webkit-scrollbar-track';
    ruleForScroll.style["background"] = `rgb(${randomColor()},${randomColor()},${randomColor()})`;
});

This specifically affects the side menu of stackoverflow, changing the scrollbar's color randomly while scrolling.

Here is an independent solution in a CodePen. Note that an important prerequisite for the style to apply is the following css rule:

.test::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent;
}

How to change overflow y scrollbar styles

I've whipped up some styles for you that looks pretty similar making use of ::-webkit-scrollbar and it's sibling selectors. Note this is only for Chromium browsers, as Scrollbars aren't a part of the W3C spec and thus don't have valid selectors, outside of Chrome's relatively robust pseudo-selectors.

.large-2 {

  margin-left: 30px;

  float: left;

  height: 300px;

  overflow-y: scroll;

  margin-bottom: 25px;

  width: 100px;

  background: #ccc;

}

.force-overflow {

  min-height: 450px;

}

.large-2::-webkit-scrollbar-track {

  border: 1px solid #000;

  padding: 2px 0;

  background-color: #404040;

}

.large-2::-webkit-scrollbar {

  width: 10px;

}

.large-2::-webkit-scrollbar-thumb {

  border-radius: 10px;

  box-shadow: inset 0 0 6px rgba(0,0,0,.3);

  background-color: #737272;

  border: 1px solid #000;

}

<div class="custom">

  <div id="front_videos">

    <div class="large-2">

      <div class="force-overflow"></div>

    </div>

  </div>

</div>

Change scrollbar style only when horizontal

You can use ::webkit-scrollbar with particular class.
For example:
Let the container be '.scroll-content'

.scroll-content::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);box-shadow: inset 0 0 6px rgba(0,0,0,0.1);background-color: #ccc;}
.scroll-content::-webkit-scrollbar{width: 5px;height: 5px;background-color: #ccc;}
.scroll-content::-webkit-scrollbar-thumb{background-color: #ff7043;}

But this method is not applicable in Mozilla Firefox

Change vertical scrollbar style

It is not recommended to play with the style of scrollbars because it has very bad portability (IE and Firefox won't support it), but if you still want to go that way, here is a jsfiddle on how to play with the webkit style for the scrollbar

   /* width */
::-webkit-scrollbar {
    width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 2px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: grey; 
    border-radius: 2px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: darkgrey; 
}

Change a scroll bar style

DEMO:

http://plnkr.co/edit/bBEj9xa6TucnJq6scIsq?p=preview

Use ::-webkit-scrollbar {width: 6px; height: 6px;}

Check demo.

http://plnkr.co/edit/bBEj9xa6TucnJq6scIsq?p=preview

Also note that CSS based scrollbars are not suitable for all browsers. So, my recommendation would be to go for js based scrollbars.

I prefer jquery.nicescroll

https://github.com/inuyaksa/jquery.nicescroll

How to style in-page scrollbar without changing browser scrollbar?

Add the class .scroll before the -webkit code

.scroll::-webkit-scrollbar {
    width: 16px;
}

.scroll::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: white; 
}

.scroll::-webkit-scrollbar-thumb {
   -webkit-border-radius: 10px;
   border-radius: 10px;
   background: #ADADAD;
}

.scroll::-webkit-scrollbar-thumb:window-inactive {
    background: #ADADAD;
}

How can I style horizontal scrollbar by CSS?

::-webkit-scrollbar {
  height: 4px;              /* height of horizontal scrollbar ← You're missing this */
  width: 4px;               /* width of vertical scrollbar */
  border: 1px solid #d5d5d5;
}

since logically one cannot force a vertical scrollbar to be a certain height (since dictated by the positioned parent) - therefore such height property is to target the horizontal's scrollbar height - and vice-versa (width for the width of the vertical scrollbar.).

MUI - How can I style the scrollbar with CSS in JS?

Since you want to do this globally, you may want to follow what CssBaseline does in it source code: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/CssBaseline/CssBaseline.js

const styles = theme => ({
  '@global': {
    '*::-webkit-scrollbar': {
      width: '0.4em'
    },
    '*::-webkit-scrollbar-track': {
      '-webkit-box-shadow': 'inset 0 0 6px rgba(0,0,0,0.00)'
    },
    '*::-webkit-scrollbar-thumb': {
      backgroundColor: 'rgba(0,0,0,.1)',
      outline: '1px solid slategrey'
    }
  }
});

it looks like the top-level/global selector to use is @global.

---

Related Topics