Menu
I am currently working on project about car travelling http://wayfi.ru and
I have encountered a problem recently - page content shifts to the left after vertical scroll appears. How to prevent this?
As I know, one could always display disabled scroll and make it enable if there is necessary.
Do you know better technique to accomplish this?
278
If you move from one page of a site without a scrollbar to another with a scrollbar, you'll see a slight layout shift as things squeeze inward a bit to make room for the scrollbar.
If you move from one page of a site without a scrollbar to another with a scrollbar, you’ll see a slight layout shift as things squeeze inward a bit to make room for the scrollbar. A classic fix was html { overflow-y: scroll; } to force the scrollbar all the time.
There’s an easy way to prevent an element from scrolling its parent. This means that if you have an element with a vertical or horizontal overflow and the user has reached the end of the scroll, the browser will start scrolling the parent element (which is mostly the body) - this is called ‘scroll chaining.’
This happens when new DOM elements are added to the page, images load or dimensions of elements change. In this article, we will share techniques to minimize this content shifting. Have you ever opened a website, started reading and, after some time had passed and all assets had finished loading, you found that you’ve lost your scroll position?
I'm afraid I do not know of any other way to do this apart from always showing the scrollbar, active or not.
The simplest way I think is:
html {
overflow-y: scroll;
}
This way, even on pages without scrolling there is space reserved for the scrollbar and the content won't jump around between pages.
172
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
