Scrollbar Reflowing

Mac developers, please note this tip: Go to System Preferences > General > Show Scrollbars and change the settings to Always Show . This is not for you personally, but for the best presentation of the web page. Because without this setting you will not experience the layout offset triggered by the scrollbar, but it will be encountered by all other users with this setting enabled. To avoid such performance issues, you should use this setting yourself.

Stefan Judis demonstrates that the use of viewport units may be one of the reasons for this problem:

100vw in the code causes horizontal overflow because the vertical scroll bar already exists and takes up part of the space. This feels very unreasonable, but that's the truth.

Stefan points to Kilian Valkhof's article on dealing with this issue. Classic solution:

The simple way is to use width: 100% . The percentage does not contain the width of the scroll bar, so it will adapt automatically.

If you can't do this, or you're setting the width of another element, add overflow-x: hidden or overflow: hidden on the surrounding element to prevent scrollbars.

Kilian Valkhof , “How to find the reason for horizontal scroll bars”

I think these are all expedients because none of them fully meet your needs.

Fortunately, a specification-based solution is coming soon. Bramus reported on this:

A side effect when displaying scroll bars on a web page is that the layout of the content may change depending on the type of scroll bar. scrollbar-gutter CSS property (released in Chromium soon) is designed to give us developers more control over this.

Bramus Van Damme , “Using scrollbar-gutter CSS attribute to prevent unexpected layout offsets caused by scrollbars”

This sounds like a workaround, and I have no doubt that this will become a very common line of code in reset stylesheets:

 body {
  scrollbar-gutter: stable both-edges;
}

However, this reminds me of... when dealing with scrollbar issues at the entire page level, it is scrollbar-gutter property that works, right? Instead of overflow attribute? overflow property has been strange in the past when it comes to scrolling related aspects. Can we really implement it in all browsers? Who knows. It looks very likely, but I will try using it even if it is close and it behaves in accordance with the specification. It feels like it is suitable for progressive enhancement.

The above is the detailed content of Scrollbar Reflowing. For more information, please follow other related articles on the PHP Chinese website!