使用固定的 position div 防止正文滾動？

Question

我有一個下拉菜單溢出了移動設備上的屏幕高度，我想讓它可滾動，但是，我遇到了一個問題，粘性定位元素后面的主體也在滾動，導致幾乎整個主體都必須滾動在您可以滾動到下拉菜單的底部之前。

我從另一篇文章中看到的一個建議是應用 class with overflow: hidden到正文，當下拉菜單被切換時，你可以看到.body_overflow我嘗試了這個，我也嘗試將.body_overflow設置為包含#market_menu下方正文中的所有其他內容，但是，將.body_overflow應用於body阻止了任何滾動，即使overflow: scroll應用於#mm_dropdown和market_menu ，並將.body_overflow應用於包含正文中#market_menu下方所有元素的 div，確實什么都沒有。

您在下面看到的 JS 在切換#markets_button時將.show應用於#mm_dropdown ，我還使用它將.body_overflow應用於正文和包含菜單下方所有內容的 div。

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>

Answer 1

你能做一個 if 語句來檢測按鈕是否被點擊以設置身體卡住的樣式嗎？ 如果你願意，我會告訴你這是怎么做的。

Answer 2

您的菜單沒有自己的滾動條的原因是因為它沒有自己的高度。 一旦你給它一個高度（ height: 50vh; ），菜單項就會在里面滾動。

 /* 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'); } } } }

 * { margin: 0; padding: 0; } #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; height: 50vh; 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; }

 <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>