Padding on the right side for vertical scrollbar with CSS only

Question

How can I add right padding (for example 8px) to my element only if the vertical scrollbar is visible? I want to avoid adding standard padding to maintain symmetry of elements. In my case, I am using overflow-y as auto and column flexbox.

To illustrate my goal:

I am aware that I can compare scrollHeight and clientHeight to determine the visibility of the vertical scrollbar. However, I want to achieve this without using JavaScript, only with CSS properties. I have tried to find some CSS properties like scroll-padding-right or scroll-margin-right, but it seems they do not work as I expected based on their names. I also attempted to add a left margin to the scrollbar, scrollbar thumb, scrollbar track, etc., but I was unable to achieve my goal.

Is it possible to achieve scrollbar padding using only CSS?

Thanks in advance.

Does this answer your question? How do I add a margin to a CSS webkit scrollbar? — tacoshy
– tacoshy, Commented May 15, 2024 at 9:15
you're looking for the wrong keyword. padding is an inner spacing. You want the outer spacing: margin — tacoshy
– tacoshy, Commented May 15, 2024 at 9:16

canelle · Accepted Answer · 2024-05-15 10:50:34Z

1

With CSS only that's not possible to select content with overflow (even though it has been discussed [selectors-5] Proposal for pseudo-selector :overflowed-content but it would have caused circular definitions).

But you can add margin to the scrollbar (selectors ::-webkit-scrollbar, ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb) with box-shadow and border properties.

See solutions here: How do I add a margin to a CSS webkit scrollbar? [closed]

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: auto;
}

::-webkit-scrollbar {
    width: 24px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 10px 10px #aeaeae;
    border-left: solid 10px transparent;
    border-top: none;
    border-bottom: none;
    border-right: solid 10px transparent;
}

::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 10px 10px #1496ce;
    border-left: solid 10px transparent;
    border-top: none;
    border-bottom: none;
    border-right: solid 10px transparent;
}

<div class="scroller">
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
  corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
  fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
  earthnut pea peanut soko zucchini.
</div>

edited May 15, 2024 at 10:50

answered May 15, 2024 at 10:35

canelle

816 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Amaranthus Over a year ago

Thanks, it's exacly what I needed :) I've tried something similar but with paddings and margins to overflow but it didn't work. Great idea with border usage as padding.

Collectives™ on Stack Overflow

Padding on the right side for vertical scrollbar with CSS only

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related