Move scrollbar off container

Viewed 29

I am trying to figure out how to move my scrollbar so it would start 20px off.

For example:

body {
  margin: 20px;
}
.scrollable-content {
  width: 1000px;
  height: 50px;
  background: aliceblue;
}
.container {
  overflow: auto;
  width: 200px;
}
.container::-webkit-scrollbar {
  height: 15px;
  background: gray;
}
.container::-webkit-scrollbar-thumb {
  background: #d3d3d5;
  border-radius: 1in;
  border: 4px solid #0000;
  background-clip: padding-box;
}
<body>
  <div class="container">
    <div class="scrollable-content"></div>
  </div>
</body>

You can see, that scrollbar's left border is aligned with element's left border:

enter image description here

But i want to get something like this instead:

enter image description here

0 Answers
Related