Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I add a margin to a CSS webkit scrollbar? [closed]

Here's my site with the current webkit scrollbar: http://willwhitehead.com

I'd like to create a gap between the scrollbar and the right edge of the screen.

How do I achieve this?

Thanks in advance,

Will

like image 657
user3757637 Avatar asked Apr 25 '15 14:04

user3757637


People also ask

How do you add a margin to Webkit scrollbar?

Use the ::-webkit-scrollbar selector, give the bar a fixed with of x pixels. then set the left property to some -px value.

How do you use scroll margin top?

The scroll-margin-top property is used to set all the scroll margins to the top of an element at once. The value specified for the scroll-margin-top determines how much of the page that is primarily outside the support should remain visible.

How do I fix the scroll bar in CSS?

The easy fix is to use width: 100% instead. Percentages don't include the width of the scrollbar, so will automatically fit. If you can't do that, or you're setting the width on another element, add overflow-x: hidden or overflow: hidden to the surrounding element to prevent the scrollbar.

What is scroll padding?

scroll-padding is part of the CSS Scroll Snap Module. Scroll snapping refers to “locking” the position of the viewport to specific elements on the page as the window (or a scrollable container) is scrolled.


1 Answers

There's yet another solution which might fit easily in everybody's project. If you use a transparent border as a margin and a box-shadow with inset to set it's color, you'd get the result you are hoping for.

For instance:

::-webkit-scrollbar {     width: 10px; }  ::-webkit-scrollbar-track {     box-shadow: inset 0 0 10px 10px green;     border: solid 3px transparent; }  ::-webkit-scrollbar-thumb {     box-shadow: inset 0 0 10px 10px red;     border: solid 3px transparent; } 

This may be an ugly scrollbar, but it serves as an example to what I mean.

However, in Chrome, the transparent property won't work, so you would have to manually insert the color that would fit with the background, preferably, the background-color.

like image 108
Victor Mendizabal Coelho Avatar answered Sep 28 '22 10:09

Victor Mendizabal Coelho