This is a bit of advice I’ve heard many times from MAC developers, and I’ll say it again: Go to System Preferences > General > Show scrollbar and set it to always. This is not about your use, but about Web development. If this is not set, you will never experience scrollbar-triggered layout changes, but someone else might. Since you want to design around problems that don’t cause this type of problem, you should set this option yourself.

Stefan Judis shows one possible reason for using viewport units:

Twitter.com/i/status/14…

In the video, 100 VWS would cause a horizontal overflow, because the vertical scrollbar is already there, taking up some space. For some reason, I don’t feel right.

Stefan found a classic article by Kilian Valkhof on how to solve this problem:

The simple solution is to usewidth: 100%Instead. The percentage does not include the width of the scroll bar, so it will automatically adapt.

If you cannot do so, or if you are setting the width of another element, thenoverflow-x: hidden 或 overflow: hiddenAdds to surrounding elements to prevent scrollbars from appearing.

Kilian Valkhof.How do I find out what triggers horizontal scrollbars?

I would say that these are all gimmicks, because they don’t exactly match what you want to do.

Fortunately, there is a prescription-based solution on the horizon:

A side effect of displaying scrollbars on the Web is that the layout of the content can change depending on the type of scrollbar. CSSscrollbar-gutterProperties (to be released with Chromium soon), designed to give our developers more control over this.

Bramus Van Damme, “Prevent unwanted Layout Shifts caused by Scrollbars with the scrollbar-gutter CSS Property”

Sounds like a trick, and I wouldn’t be surprised if this became a common line in the Reset stylesheet:

body {
  scrollbar-gutter: stable both-edges;
}
Copy the code

This surprised me… Does the tag handle this at the entire page level? Not the < HTML > tag? This would have been odd in the context of scrolling in the past.

Do we really want it to cover all browsers? Who knows? Right now it looks like a good possibility. But even though it’s about to be released, this behavior is so special that I’ll still handle it, feeling that progressive enhancement is friendlier.

Original link: css-tricks.com/scrollbar-r…