Prevent body scrolling with fixed position div?

  css, drop-down-menu, html, javascript, scroll

I have a dropdown menu that overflows the screen height on mobile, and I would like to make it scrollable, however, I am facing a problem with the body behind the sticky positioned element also scrolling, causing issues with having to scroll almost the entire body before you can scroll to the bottom part of the dropdown menu.

A suggestion I’ve seen from another post was to apply a class with overflow: hidden to the body, when the dropdown menu is toggled, you can see with .body_overflow I attempted this, I have also tried setting .body_overflow to a div containing everything else in the body below #market_menu, however, applying .body_overflow to body prevented any scrolling, even with overflow: scroll applied to #mm_dropdown and market_menu, and applying .body_overflow to a div containing all elements below #market_menu in the body, did nothing at all.

The JS you see below is applying .show to #mm_dropdown when #markets_button is toggled, I was also using it to apply .body_overflow to the body and the div containing everything below the menu.

HTML:

<div id="market_menu" class="black">
    <button onclick="dropMenu()" id="markets_button">Markets</button>
    <div id="mm_dropdown" class="mm_dropdown">
      <a href="" id="mm_active_child">Line 1</a>
      <a href="">Line 2</a>
      <a href="">Line 3</a>
      <a href="">Line 4</a>
      <a href="">Line 5</a>
      <a href="">Line 6</a>
      <a href="">Line 7</a>
      <a href="">Line 8</a>
      <a href="">Line 9</a>
    </div>
</div>

CSS:

#market_menu {
    display: flex;
    flex-flow: column nowrap;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,.5);
    position: sticky;
    z-index: 9;
    background-color: white;
    overflow: scroll;
}
#market_menu button {
    height: 75px;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
}
.mm_dropdown {
    display: flex;
    justify-content: center;
}
#market_menu a {
    display: flex;
    height: 75px;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: auto;
}
#market_menu a:hover {
     color: white;
     background-color: black;
 }
#mm_active_child {
    color: white;
    background-color: black;
}

@media only screen and (min-width: 865px) {
    #market_menu {
        top: 7rem;
    }
    .mm_dropdown {
        flex-flow: row wrap;
    }
    #market_menu a {
        padding: 0 14pt;
    }
    #market_menu button {
        display: none;
    }
}
@media only screen and (max-width: 865px) {
    #market_menu {
        top: 5rem;
    }
    .mm_dropdown {
        flex-flow: column nowrap;
        display: none;
    }
    #market_menu button {
        display: flex;
    }
}
.show {
    display: flex;
}
.body_overflow {
    overflow: hidden;
}

JS:

<script>
        /* When the user clicks on the button,
    toggle between hiding and showing the dropdown content */
        function dropMenu() {
            document.getElementById("mm_dropdown").classList.toggle("show");
            document.getElementById("market_body").classList.toggle("body_overflow")
            console.log("click");
        }

        // Close the dropdown menu if the user clicks outside of it
        window.onclick = function(event) {
            if (!event.target.matches('#markets_button')) {
                var dropdowns = document.getElementById("mm_dropdown");
                var body = document.getElementById("market_body");
                var i;
                for (i = 0; i < dropdowns.length; i++) {
                    var openDropdown = dropdowns[i];
                    var overflowBody = body[i];
                    if (openDropdown.classList.contains('show')) {
                        openDropdown.classList.remove('show');
                    }
                    if (overflowBody.classList.contains('body_overflow')) {
                        overflowBody.classList.remove('body_overflow');
                    }
                }
            }
        }
    </script>

Source: Ask Javascript Questions

LEAVE A COMMENT