Menu
Is it possible to add padding or margin around the scrollbar item or scrollbar-track? I've tried and can only get padding top/bottom. Adding padding to the UL has no effect on scrollbar. Negative margins on scrollbar have no effect. Ideas? JS Fiddle here.
::-webkit-scrollbar { width: 12px; margin:10px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px; padding: 10px } ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: rgba(255,0,0,0.8); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } ::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); 
489
Is there any way to add the scroll bar for it? A: You can try to add the scroll bar for submenu manually. For this purpose you should open your page where you added the css3menu in any text editor and add class="scroll" into the <ul></ul> tag. You can also change the value of 'max-height' parameter.
The scroll-padding-left property defines offsets for the left of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user.
You can see an example below, basically forget adding margin or padding there, just increase the width/height of scroll area, and decrease the width height of thumb/track.
Quoted from how to customise custom scroll?
body { min-height: 1000px; font-family: sans-serif; } div#container { height: 200px; width: 300px; overflow: scroll; border-radius: 5px; margin: 10px; border: 1px solid #AAAAAA; } div#content { height: 1000px; outline: none; padding: 10px; } ::-webkit-scrollbar { width: 14px; } ::-webkit-scrollbar-thumb { border: 4px solid rgba(0, 0, 0, 0); background-clip: padding-box; border-radius: 9999px; background-color: #AAAAAA; }<div id="container"> <div id="content" contenteditable> Click to type... </div> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
