Another thing that is related to scrolling is the scrollbar gutter. Taking the previous example, when the content gets longer, adding a scrollbar will cause a layout shift. The reason the layout shift happens is to reserve a space for the scrollbar.
Consider the following figure.
Notice how the content shifted when it became longer as a result of showing a scrollbar. We can avoid that behavior by using the
Checkout the following interactive demo on Codepen.
Support Defensive CSS
Do you like the content? You can buy me a cup of coffee. Thank you!