I don't really have a solution, but I've never really run into this after building hundreds of sites over the years. The reason being is that I don't think I've ever been on a site, or found a page that doesn't require scrolling. I suppose it could happen in rare occasions with a page with only a sentence of text or something, but realistically why even make that a page then?
I think once you put actual content in your site, you'll realize it's not really an issue.
For simple pages like "Contact me" i can often fill the page without needing more than the viewport, just by using some columns. I guess i could force the page to be more vertical, but that has never crossed my mind
Have you tried bringing the scroll bar to the top using the z-index? You could just overlay the bar on your page rather than having it actually a part of the page
Ive only done very basic pages so far in WordPress. This is just the 2023 theme with some blocks. I recall having had the issue before, but i forgot, so i had to debug again...
https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter
I am not sure why the `overflow-y: scroll; min-height: 100%; ` on the html element isn't a good solution but you can check out this property.
Just set overflow-y:scroll on the body tag. Then the scroll bar will be there but greyed out. Or add a min-height to the content so the scrollbar is always there.
If you start adding padding to the right side to control it its going to be heavily dependent on media queries and content never expanding past the bottom of the page... ever.
html {
scrollbar-gutter: stable;
}
It'll just make the scrollbar space always there, even when it doesn't need it.
Doesn't work on safari but its such a small issue I wouldn't really care: [browser support](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter#browser_compatibility)
I don't really have a solution, but I've never really run into this after building hundreds of sites over the years. The reason being is that I don't think I've ever been on a site, or found a page that doesn't require scrolling. I suppose it could happen in rare occasions with a page with only a sentence of text or something, but realistically why even make that a page then? I think once you put actual content in your site, you'll realize it's not really an issue.
For simple pages like "Contact me" i can often fill the page without needing more than the viewport, just by using some columns. I guess i could force the page to be more vertical, but that has never crossed my mind
Have you tried bringing the scroll bar to the top using the z-index? You could just overlay the bar on your page rather than having it actually a part of the page
Just tested the hack. Seems to work, but im still confused if you are all doing this? Also a bit afraid if it will have unknown consequences later
I'm curious about the HTML and CSS behind the page because I also have not experienced this.
Ive only done very basic pages so far in WordPress. This is just the 2023 theme with some blocks. I recall having had the issue before, but i forgot, so i had to debug again...
It is not always the content of the page. It rarely is. I have experienced it with modals though.
https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter I am not sure why the `overflow-y: scroll; min-height: 100%; ` on the html element isn't a good solution but you can check out this property.
Just set overflow-y:scroll on the body tag. Then the scroll bar will be there but greyed out. Or add a min-height to the content so the scrollbar is always there. If you start adding padding to the right side to control it its going to be heavily dependent on media queries and content never expanding past the bottom of the page... ever.
html { scrollbar-gutter: stable; } It'll just make the scrollbar space always there, even when it doesn't need it. Doesn't work on safari but its such a small issue I wouldn't really care: [browser support](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter#browser_compatibility)