How to make the scrollbar spacing/padding/margin with CSS

Question

Here is current scrollbar I working on.

//The overflow div
div {
width: 100%;
overflow: overlay;
}

//Scroll Bar CSS
::-webkit-scrollbar{width:14px;}

::-webkit-scrollbar-thumb {background: #4b49499c;border-radius: 50px;}

::-webkit-scrollbar-track {background: transparent;}

I want to make the scrollbar have some spacing/padding/margin on right site, instead of scrollbar fully attached to the end of right. I tried to reduce the div width size. this does work for creating some right space for the scrollbar, but the children div inside it the width is reduce together.

After Reducing the width of div Image

   //The overflow div
    div {
    width: 96%;
    overflow: overlay;
    }
    
    //Scroll Bar CSS
    ::-webkit-scrollbar{width:14px;}
    
    ::-webkit-scrollbar-thumb {background: #4b49499c;border-radius: 50px;}
    
    ::-webkit-scrollbar-track {background: transparent;}

And here is the sample result that I want.

Expected Result

Anyone have idea on how to make this happen?

Can you provide a demo of your code using CodePen? It's much easier for other people to answer your questions. — Siddhant Varma, Jul 06 '21 at 05:57
https://codepen.io/gerardhaw/pen/mdmVjeZ I just did a simple CodePen here. — Gerard Haw, Jul 06 '21 at 06:06
Look at the following answer for some more inputs : https://stackoverflow.com/questions/29866759/how-do-i-add-a-margin-to-a-css-webkit-scrollbar — Ismail Vittal, Jul 06 '21 at 06:51

How to make the scrollbar spacing/padding/margin with CSS

0 Answers0