Apply Webkit Scrollbar Style to Specified Element

Apply webkit scrollbar style to specified element

Your idea was correct. However, the notation div ::-webkit-scrollbar with a space after div is actually the same as div *::-webkit-scrollbar; this selector means "scrollbar of any element inside <div>". Use div::-webkit-scrollbar.

See demo at http://jsfiddle.net/4xMUB/2/

Webkit Scroll Bar applied to certain element

Your CSS works just fine - the problem in your CodePen is that the document is scrolling, not the #container element, so you don't see its scrollbar.

Add this CSS as an example to see the correct scrollbar:

#container {
height: 500px;
overflow: auto;
}

Updated CodePen: http://codepen.io/capitalq/pen/MbQgJv

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.

Apply Border-Radius To Scrollbars With ::-webkit-scrollbar CSS3

Hope this Example helps you: http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/overflow-scrollbar-combinations.html

I think you have missed these things:

::-webkit-scrollbar {
width: 13px;
height: 13px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

for better understanding you can follow this fiddle: http://jsfiddle.net/Sfy9p/3/



Related Topics



Leave a reply



Submit