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

CSS

Posted by Boris Kamp
Boris Kamp
16,660 Points

prevent background from scrolling when mobile menu is open

I know similar questions have been asked here and I've carefully looked trough all of them. I eventually found this to work pretty good, but not completely. Im quite sure it has something to do with my custom mobile menu which I'm developing. Here is a codepen in which I replicated my issue. I created javascript functions to open and close the mobile menu and add classes to certain divs.

My issue is described in the css part of the pen:

    body {
        .background-content { //this works but results in non rubberband-scrolling, I would like the rubberband. It also breaks my menu links, the menu does not close on link click and go the the div ID
            height: 100%;
            overflow: auto;
        }
        // .background-content.overlayed { //this works as well, but results in the background-layer to go to the top everytime you open the menu. This is not preferred when halfway on the page and the menu is clicked.
        //     height: 100%;
        //     overflow: auto;
        // }
    }

I've been struggling with the default Bootstrap menu but did not like the way it behaves, I want my users to not be distracted by the background content when the mobile nav is open.

Do you guys have any idea how to solve this?

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

I'm confused, your codepen seems to do everything you describe.

I'm using Chrome, maybe it's different on another browser?

Boris Kamp
Boris Kamp
16,660 Points

Thanks for your answer @stevenparker Thats weird, so you are saying my codepen behaves the following way on Chrome on you mac/pc:

  1. the menu opens 100% fullscreen
  2. the background does NOT scroll when you scrolled past the menu's last item, other words, it's like the background is not even there.
  3. the links work, when you click an item in the mobile menu, the menu closes and the page scrolls to the div with the specific ID
  4. if you're halfway on the page, click the menu and close it again (because you don't want to use the navigation), the background layer does NOT jump to the top. other words, the background layer stays on it's position when opening and closing the menu.

It does not on my iMac nor iPad nor iPhone.

Liliana Brissos
Liliana Brissos
7,686 Points

Steven Parker Boris Kamp: I've tested this on a Mac - safari, firefox and chrome, and the scrolling works just fine.