CSS vertical scrollbar padding left/right in UL possible?

css, scrollbar

Solution

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>

Problem

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); ```

Original source