4 ms·
The trick to prevent scrolling by setting overflow: hidden unfortunately results in visual page jumping for me. The reason is I have macOS set up to always sho
by vintagedave 2y ago
The trick to prevent scrolling by setting overflow: hidden unfortunately results in visual page jumping for me.
The reason is I have macOS set up to always show scroll bars, instead of hiding them. At least one browser (I forget which, but I test on Safari, Firefox and Chrome) doesn’t have a disabled scroll bar but removes it altogether. This makes the page wider and causes it to reflow and move.
Does anyone know how to keep the scroll bar onscreen, just not enabled?
- KTibow 2y agoWebsite authors can set a scrollbar gutter.
- dsmmcken 2y agoscrollbar-gutter: stable; to those unfamiliar. https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter#stable https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-g...
- andrewmcwatters 2y agoMan, this makes me feel old.
- culi 2y agoThis is only recently supported by all major browsers thanks to the interop efforts. pre-2024 browser versions will not support this
- andrewmcwatters 2y agoIt's been a while since I've tested this, but an explicit overflow-y: scroll used to keep the scrollbar there, so that when you needed to change the property, the user-agent controls wouldn't pop in or out.
- badlibrarian 2y agoyes, "html { overflow-y: scroll }" works.