CODEWITHSUNDEEP
css
Mermaid
Mermaid

Reputation: 17

How to make the padding in scrollbar? CSS

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;
}

Upvotes: 1

Views: 6283

Answers (2)

H3AR7B3A7
H3AR7B3A7

Reputation: 5261

Scrollbar Padding

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

Chrome vs Firefox

Be aware that the support to adjust the scrollbar is very limited in firefox compared to chrome browsers. The result of it will not show up in this snippet, nor on websites like jsfiddle. Rounded corners are impossible to achieve in firefox without using your own implementation or a third party library like thisone for example.

Example

body {
  background-color: #14142B;
}

/* FIREFOX */

html {
  scrollbar-width: thin;
  scrollbar-color: #6E7191 #262338;
}

/* CHROME */

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

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

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

::-webkit-scrollbar-thumb:hover {
  background: #7E81A1;
}

.container {
  margin: 1.5rem .5rem;
  overflow-y: scroll;
  max-height: calc(100vh - 3rem);
}

.content {
  height: 25rem;
}

hr {
  border: 0;
  border-top: 2px solid #201F36;
}

.filler {
  height: 3rem;
}
<div class="container">
  <div class="content">
    <div class="filler"></div>
    <hr>
    <div class="filler"></div>
    <hr>
    <div class="filler"></div>
    <hr>
    <div class="filler"></div>
  </div>
</div>

Upvotes: 0

Jeff Freedman
Jeff Freedman

Reputation: 66

::-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!

Upvotes: 1

Related Questions