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:
But i want to get something like this instead:

