Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Luis Dominguez
Luis Dominguez
3,516 Points

How to prevent scrollbar from shifting content of the page?

I've designed a website as practice after going through the How to Make a Website course, at luisdominguez.xyz/nujabes.html . However, I've noticed that the content on the About page is slightly more right than the other pages. I think it is due to the scrollbar, and the solution I found was to simply display the scrollbar on all the pages, but I feel like it's a cheap solution. How do websites usually deal with this? Do sites usually always have a scrollbar, eliminating this issue? Thank you!

1 Answer

Chyno Deluxe
Chyno Deluxe
16,936 Points
Chyno Deluxe
Chyno Deluxe
16,936 Points

I've rarely seen a website modify the page layout to compensate for a scroll bar. The fact that a majority of website are now being viewed on mobile devices, you are almost guaranteed to have scrollbars on all webpages. But! if you are wanting to make the changes then I would suggest the following.

html, body {
    margin-right: -4px; /*COMPENSATES THE VERTICAL SCROLLBAR*/
    overflow-x: hidden; /*REMOVES HORIZONTAL SCROLLBAR THE ABOVE CREATES*/
    margin-top: 0px; /*COMPENSATES THE HORIZONTAL SCROLLBAR*/
}

You would need to place this on each webpage that would have a scrollbar. Best way to reduce repetition, would be to create a javascript to create these modifications for your.

I hope this helps.

Luis Dominguez
Luis Dominguez
3,516 Points

Interesting, I felt like perhaps the scrollbar always usually showed on webpages, thus eliminating the need to code specifically for them messing with the content of the page.

Just curious, is there a way to constantly keep the footer at the very bottom, to make sure the scrollbar always appears naturally? For example, if the page would have very little text, the footer would appear below regardless, solving this issue ahead of time. This would make it so that coding specifically for the scrollbar would not be necessary.

Hope this makes sense!