Style Webkit Scrollbar on Certain State

Style webkit scrollbar on certain state

Changing the background color works just fine for me.

http://jsfiddle.net/QcqBM/1

div#container:hover::-webkit-scrollbar {
    background: lightyellow;
}

Are you sure there isn't something else wrong with your CSS call?

Apply ::-webkit-scrollbar to one specific element

Remove the space between .content and ::-webkit:

.content::-webkit-scrollbar {
    width: 5px; 
}

Leaving the space in there means you're looking for children of .content rather than the container itself.

jsFiddle

webkit scrollbar using jQuery.css() method

The .css() method applies CSS properties to an element.

::webkit-scrollbar-* are CSS selectors that select pseudo-elements.

jQuery does not have any methods that interact with pseudo-elements.

Instead, you can build your own stylesheet.

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.

Styling ::-webkit-scrollbar-track not working

Try the following snippet for styling your scrollbar.

Note: This only works on -webkit browsers like chrome, safari
because there are not W3C standard for CSS and therefore most browsers
just ignore them.

div {  width: 400px;  height: 150px;  overflow: auto;}
div::-webkit-scrollbar-track {  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);  border-radius: 10px;  background-color: #F5F5F5;}
div::-webkit-scrollbar {  width: 12px;  background-color: #F5F5F5;}
div::-webkit-scrollbar-thumb {  border-radius: 10px;  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);  background-color: #555;}

<div>  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit, nunc ut porta euismod, purus leo suscipit ante, quis hendrerit sem velit ut tellus. Aenean justo lorem, viverra tristique malesuada quis, rhoncus sodales turpis. Donec a tempus felis.  Morbi faucibus eros nec leo facilisis lacinia. Nam at erat ac augue semper ultricies vitae nec erat. Donec et dapibus felis, vitae placerat magna. Aliquam non magna nec orci scelerisque lobortis.  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit, nunc ut porta euismod, purus leo suscipit ante, quis hendrerit sem velit ut tellus. Aenean justo lorem, viverra tristique malesuada quis, rhoncus sodales turpis. Donec  a tempus felis. Morbi faucibus eros nec leo facilisis lacinia. Nam at erat ac augue semper ultricies vitae nec erat. Donec et dapibus felis, vitae placerat magna. Aliquam non magna nec orci scelerisque lobortis.</div>

Different styles for x-axis and y-axis scrollbars of the same div

I'm not 100% sure about this, but I think you can style horizontal and vertical scrollbars seperate like this.

Horizontal:

.nav-menu::-webkit-scrollbar-thumb:horizontal  {
    height: 8px;
    background: gray;
}

Vertical:

.nav-menu::-webkit-scrollbar-thumb:vertical {
    width: 8px;
    background: white;
}

See here for more details, second section 'The Different States':
https://css-tricks.com/custom-scrollbars-in-webkit/

Styling scrollbar only for div, not for entire body

You are missing the content height. Just add content height, you will see scrollbar.

.content{
    height:300px; //for example.
}

---

Related Topics