Home » Web » CSS » More Elegant Fix for Jumping Scrollbar Issue

More Elegant Fix for Jumping Scrollbar Issue

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. Ayke van Laëthem has found a more elegant solution in html { margin-left: calc(100vw - 100%); } which works because vw accounts for the scrollbar and % doesn’t, and… just read it as there are a few more things you’ll need to be aware of anyway.

Pretty sweet for a first blog post Ayke!

Direct Link to ArticlePermalink


More Elegant Fix for Jumping Scrollbar Issue is a post from CSS-Tricks

Feed Source: CSS-Tricks
Article Source: More Elegant Fix for Jumping Scrollbar Issue

About Admin

Powered by WP Robot