CSS vertical scrollbar padding left/right in UL possible?

Question

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>

Leave a Comment Cancel reply