Prevent scrollbar from moving content

[agjs]

Hey guys. Is there some utility that would prevent the scrollbar to move the content when it's shown.

For instance, if you got to a page that doesn't have vertical scrolling, and then you move to the one that does, content will move from right to left for the scrollbar width. Is there a way to change this behavior using Tailwind CSS or I have to write custom stuff?

Thanks in advance,
Alex

[ThomOrlo]

Maybe scrollbar-gutter-stable ?

https://twitter.com/bramusblog/status/1418368669986471943

[agjs]

That feature is not supported anywhere, so I'd say, no, that isn't a solution.

[ThomOrlo]

Yes I know, it's just a suggestion for later :)

[lukewarlow]

As @ThomOrlo mentions above the upcoming scrollbar-gutter property is what you'll need to fix this.

Coming in Chrome 94 https://www.chromestatus.com/feature/5746559209701376

Unfortunately theres no existing cross browser way to do this. If you do really want to avoid the layout shift, set overflow: scroll on every page. This will show an empty scrollbar on the pages that don't scroll. Not the best visually but does avoid the layout shift.

[lukewarlow]

Just to note Chrome 94 is now out so you can test scrollbar-gutter to see how it works. (Ignore the compat data not including Chrome 94 there's a PR to fix that)

[lukewarlow]

If my PR gets merged there will be utilities for this (scrollbar-gutter) built into Tailwind

[lukewarlow]

Just in case anyone else finds this discussion.
Firefox has an Intent to Ship aiming to support scrollbar-gutter from version 97. Once that is in the property will be the solution to this problem. While Safari doesn't support it the vast majority of Safari users have overlay scrollbars which nullifies this problem.

[Warren7599]

Everything is very open with a clear description of the issues. It was truly informative. Your website is very helpful. Many thanks for sharing!
Vanilla Gift Card Balance

[lukewarlow]

Unfortunately my PR mentioned above wasn't accepted (Adam gave a very reasonable explanation why on the PR itself)

In case anyone comes across this discussion and wants a solution in the meantime. I've made an npm package with a plugin for scrollbar gutter (along with width and color) utilities. See https://github.com/lukewarlow/tailwind-scrollbar-utilities

[mpsijm]

Since scrollbar-gutter is available available in modern browsers since December 2024 (https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scrollbar-gutter), do you think these classes could be added to Tailwind natively? 😄

[lukewarlow]

They absolutely could be. I'm not sure if they will be, I feel like at this point that's up to the tailwind team.

[rozsazoltan]

Yeah:

Warning

Not all browsers support it, so the project is increasing the minimum browser version for some browsers.

• Chrome 111 (unchanged, available from Chrome 94)
• Safari 16.4 (changes to Safari 18.2)
• Firefox 128 (unchanged, available from Firefox 97)

Presumably Safari 18.2 would be such an enhancement that it won't be implemented as a default Tailwind Utility for a long time - if you're into that - but until then you can manually add it to any of your projects via functional utilities.

@theme inline {
  --scrollbar-gutter-both: both-edges;
  --scrollbar-gutter-stable-both: stable both-edges;
}

@utility gutter-* {
  scrollbar-gutter: --value('auto', 'stable', --scrollbar-gutter-*);
}

Some reference for functional utilities:

• How to can create (functional) utilities with @utility without plugin
• Combining multiple utilities to avoid code duplication; attaching a prefix to --value due to utility name shortening
• Tailwind functional utilities