CSS: How to customize scroll bar padding and margin based on class/id

Question

I want to have three different kind of scrollbar whose padding & margins are different. Below is global style for my scrollbar:

/*
Modifying the scroll bar across the whole application
*/
/* width */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    border-radius: 10px;
    width: 5px;
    height: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: #999999 !important;
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    background: #d1d1d1 !important;
    border: 1px solid #ebebeb !important;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #b30000;
}

Now I want to have scroll bars with different padding & margin using classname or id. I don't want scrollbar padding and margin to effect padding & margin of content present in scrollbar. How can I write css in this manner which will put different padding for each scrollbar.

Answer 1

You can select that element the same way you selecting elements with css.

Select the container div and add your rules like this

<div class="container">
 <div class="innerdiv"></div>
</div>

.container {
   height: 300px;
   width: 300px;
   overflow-y: scroll;
}
.container .innerdiv {
   height: 600px;
   background:blue;
}
.container::-webkit-scrollbar {
    width: 3px;
}
.container::-webkit-scrollbar-thumb {
  background: black;
}
.container::-webkit-scrollbar-track {
    background: red;
}

here is a working example -> https://jsfiddle.net/2fzpoycv/

Answer 2

Look Here is an Example

and its also here

Answer 3

read this URL may b this solve your query https://css-tricks.com/almanac/properties/s/scroll-padding/