CSS vertical scrollbar padding left/right in UL possible?

Question

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 effe

Answer 1

You can see an example over there (http://jsfiddle.net/6KprJ/1/), 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?

::-webkit-scrollbar {
    width: 14px;
    height: 18px;
}
::-webkit-scrollbar-thumb {
    height: 6px;
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    -webkit-border-radius: 7px;
    background-color: rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}
::-webkit-scrollbar-corner {
    background-color: transparent;
}

Answer 2

I created a margin-right effect using border-right on the scrollbar-thumb:

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background: red;
  border-right: 4px white solid;
  background-clip: padding-box;
}

The scrollbar appears to have width 4px and margin-right 4px.

Here's a fiddle as well: https://jsfiddle.net/4kgvL93h/3/

Answer 3

Another important attribute to add vertical or horizontal margin:

::-webkit-scrollbar-track {
  margin: 0 30px;
}

Answer 4

You can add a margin to the scrollbar track;

#someID ::-webkit-scrollbar-track{
  border-radius: 15px;
   margin: 40px;
  box-shadow: inset 7px 10px 12px #f0f0f0;
  
 }

Answer 5

This solution make a real space between content and scrollbar (if a scrollable element doesn't have a transparent background). Useful for window scrollbars.

.scroll {overflow:auto;}
.scroll::-webkit-scrollbar {
    width:16px;
    height:16px;
    background:inherit;
}
.scroll::-webkit-scrollbar-track:vertical {
    border-right:8px solid rgba(0,0,0,.2);
}
.scroll::-webkit-scrollbar-thumb:vertical {
    border-right:8px solid rgba(255,255,255,.2);
}
.scroll::-webkit-scrollbar-track:horizontal {
    border-bottom:8px solid rgba(0,0,0,.2);
}
.scroll::-webkit-scrollbar-thumb:horizontal {
    border-bottom:8px solid rgba(255,255,255,.2);
}
.scroll::-webkit-scrollbar-corner,
    .scroll::-webkit-resizer {background:inherit;
    border-right:8px solid rgba(255,255,255,.2); //optional
    border-bottom:8px solid rgba(255,255,255,.2); //optional
}