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

General Discussion

Posted by Alex Chow
Alex Chow
4,521 Points

Hiding Scroll Bar on the Body

I am using a plugin from Zurb found here: http://foundation.zurb.com/sites/docs/v/5.5.3/components/reveal.html. My site uses these modal windows to expand and display multiple detailed images of a thumbnail. I've customized them to have a certain height and scroll when the content overflows. I would like the scroll bar on the body to be hidden when these modal windows are open so the user doesn't see two separate conflicting scroll bars. How can I achieve this? Is it a css or java issue?

Thank you in advance.

1 Answer

Kai Nightmode
Kai Nightmode
37,045 Points
Kai Nightmode
Kai Nightmode
37,045 Points

There is more than one way but a quick and easy way would be use a bit of CSS and JS together.

For the CSS you could create a reusable class like...

.hide-scroll {
    overflow: hidden;
}

Then using a bit of JS, apply that class to the BODY element when a modal window is active. The HTML could look like...

<body class="hide-scroll">

Just remember to remove the special CSS class from the body element once a modal window is closed so users can scroll again.

I think the only drawback to the above method will be the "jump" that the body content will do when scrollbars are removed. This happens because the content will have a bit more room on the right side where the scrollbars used to be.

There are other solutions too but the above should be quick and easy if you want to try it out. :D

Alex Chow
Alex Chow
4,521 Points

Hi Daniel,

Thanks for the help. I noticed that it's okay on different browsers for the mac but it does jump on the Google Chrome browser for the pc. Is there a better way to avoid this?

Kai Nightmode
Kai Nightmode
37,045 Points

Not sure what would be the best way. One possibility would be to add some padding-right to compensate when the scrollbar isn't visible. The scrollbar may take up different sizes in different browsers and operating systems though. Might be one of those situations where getting the result to a great state is worth it but getting it to perfection may not be.