Avoiding pageshift by forcing a scrollbar with CSS

David Carr

HTML CSS Tutorials

I've had a few people ask me about the same problem recently its a simple problem with a simple solution.

Ever noticed your page shift when using a central container when moving from page to page? chances are you have and the reason for this in most cases is due to some pages not having enough content for the browser to create a scrollbar and other pages having enough content so when moving pages the central container will adjust itself to be in the center of the available space, this can cause a slight shift on position.

The solution is to either have enough content to make a scrollerbar not an ideal solution its much easier to add a tiny bit of CSS to your stylesheets to force a scrollbar then you never need worry about the page shifting vertically.

html>body { overflow:scroll; }

That will force the browser to ensure there is always a scrollbar visible.

Fathom Analytics $10 discount on your first invoice using this link

David Carr - Laravel Developer

Hi, I’m David Carr

A Senior Developer at Vivedia
I love to use the TALL stack (Tailwind CSS, Alpine.js, Laravel, and Laravel Livewire)

I enjoy writing tutorials and working on Open Source packages.

I also write books. I'm writing a new book Laravel Testing Cookbook, This book focuses on testing coving both PestPHP and PHPUnit.

Sponsor me on GitHub

Subscribe to my newsletter

Subscribe and get my books and product announcements.

Laravel Testing Cookbook

Help support the blog so that I can continue creating new content!

Fathom Analytics $10 discount on your first invoice using this link

Subscribe to my newsletter

Subscribe and get my books and product announcements.

© 2006 - 2023 DC Blog. All code MIT license. All rights reserved.