Comment by chrismorgan

2 years ago

If someone who maintains this site happens to be here: in the “code ligatures” section, where .overflow-y-scroll is used, that should be doing `overflow-y: auto` rather than `overflow-y: scroll`… though honestly I’m sceptical about the wisdom of the height capping anyway.

`overflow: scroll` is almost never (p>0.999) the right thing, and users that don’t use overlay scrollbars are suffering because of the poor choice of name, getting a forced scrollbar when one is almost never appropriate. (This includes almost all Windows for now, I believe; and some Linux, probably no longer most since GNOME is bent on ruining everyone’s life; and some macOS.)

—⁂—

When is `overflow: scroll` legitimate?

One obsolete case is preventing document scrolling when a modal is open, without triggering reflow due to the scrollbar disappearing, but I say the side-effects are still worse than the problem (the document scrollbar is nonsensical while the modal is open), so you should let it be (why was scrolling the document under the modal such a problem anyway?), or prevent scrolling by means other than scrollbar manipulation, by capturing it in the modal backdrop.

Another obsolete case is avoiding a bit of layout shift when switching between pages if some fit in the viewport an others don’t; but honestly it’s so long since I’ve seen a site where any pages fit in the viewport… and more to the point, this is better handled with `scrollbar-gutter` (not supported by Safari; you could use @supports to fall back to `overflow: scroll`, but the importance and number of affected users—since Safari is normally overlay scrollbars—are so tiny I don’t think it’s worth it).

The only arguably legitimate case I can think of is on spreadsheets/data grid components, where you can reasonably prefer to display a noop scrollbars rather than just reserving the space for them.

OK, and one other: code to find scrollbar dimensions for various layout purpose normally uses `overflow: scroll` on a temporary element and this is legit, even though you could do it other, mildly more complex ways; but it also makes assumptions about scrollbars always being the same size, and there’s honestly no reason why they should be, and `scrollbar-width` has shown a distinct appetite for using thinner scrollbars in some places and a browser could reasonably vary its default scrollbar width based on the dimensions. And scrollbar-dimension-finding isn’t particularly common, and the problems it’s used to solve are mostly better handled in other ways; now if only viewport units weren’t broken by design in the presence of document scrollbars…

I’ve contemplated campaigning for explicit deprecation of `overflow: scroll` and getting warnings shown in dev tools if you use them, because I’ve seen it misused so many times in the last decade, where people actually meant `overflow: auto`, and other than scrollbar-dimension-finding doubt I’ve seen even a single legitimate and reasonable use in that time.

I have used it a few times in cases where I am showing some text whose size will vary a bit, around the scrolling threshold. Better to consistently show the scrollbar than have everything jump.

Still surprised that you are so worked up by this - is it really so common or so problematic?

  • I encounter inappropriate `overflow: scroll` that should have been `overflow: auto` very frequently (in the scheme of things), probably averaging over once a month.

    Your use case sounds like it might be better handled by `scrollbar-gutter: stable`, though I might adjust my judgement on seeing it.