How to make the padding in scrollbar? CSS-CodePudding

I've tried everything, searched the whole stack overflow and google. Can someone help me to make this particular type of scrollbar? When I use the border-right/top/bottom to make the spaces around it, it breaks the border-radius and gets ugly. As a reference, it's the same scrollbar used in Googledocs, a slim, rounded and doesn't touch the margins of the page: https://docs.new/

Here's the image: rounded, slim and not touching

So far I got:


::-webkit-scrollbar {
  background: #262338;
  width: 6px;
}

::-webkit-scrollbar-thumb {
  padding: 0 4px;
  background: #6E7191;
  border-radius: 6px;
  height: 48px;
}

CodePudding user response：

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    border-radius: 34px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 8px;
    transition: all 0.4s;
    -moz-transition: all 0.4s;
    -webkit-transition: all 0.4s;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
    border-radius: 16px;
}

This would get you the main design of the scrollbar you are looking. This is what I used on my website. Hope this is the design you want!

CodePudding user response：

Scrollbar Padding

I think you'll have to use a container to accomplish the not touching part of your requirements:

body {
    background-color: #ccc;
}

::-webkit-scrollbar {
    width: 15px;
    border-radius: 34px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 8px;
    transition: all 0.4s;
    -moz-transition: all 0.4s;
    -webkit-transition: all 0.4s;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;   
}

.container {
  margin: 1rem;
  overflow-y: scroll;
  max-height: calc(100vh - 2rem);
}

.content {
  height: 50rem;
  width 50rem;
}

<div >
  <div ></div>
</div>