單擊漢堡菜單時如何禁用滾動？ 然后在從導航菜單中選擇一個選項時重新啟用滾動

Question

我相信我對 HTML、CSS 和 JS 有一些相當不錯的了解。 但是，我被困在一個小錯誤上。 每當我單擊我的漢堡菜單圖標時，就會出現一個疊加層，為用戶提供在我的網站中導航的選項。 每當單擊漢堡菜單時，我都設法禁用了正文的滾動，但是，一旦用戶單擊適當的錨標記，將它們帶到網站上所需的位置，我希望重新啟用滾動。

這似乎是一個小修復，但我已經與這個錯誤作斗爭了很長一段時間，我的大腦現在感覺很煎熬，哈哈。 如果有人可以對此有所了解，將不勝感激。

我的代碼如下：

HTML：

        <header>
            <div class="container">
                <nav class="nav-container">
                    <div class="menu-toggle">
                        <i class="fas fa-bars" onclick="lockScroll();"></i>
                        <i class="fas fa-times"></i>
                    </div>
                    <ul class="nav-items nav-toggle" id="menu">
                        <li class="nav-links">
                            <a href="#" class="nav-link">Home</a>
                        </li>
                        <li class="nav-links">
                            <a href="#about-area" class="nav-link">About</a>
                        </li>
                        <li class="nav-links">
                            <a href="#project-area" class="nav-link">Projects</a>
                        </li>
                        <li class="nav-links">
                            <a href="#contact-area" class="nav-link">Contact</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>

CSS：

.lock-scroll {
    overflow: hidden;
}

JavaScript：

function lockScroll() {
    if ($('body').hasClass('lock-scroll')) {
        $('body').removeClass('lock-scroll');
    } else {
        $('body').addClass('lock-scroll');
    }
}

Answer 1

您可以在錨點單擊時再次調用刪除滾動 function：

$("a.nav-link").click(function(){
   $('body').removeClass('lock-scroll');
})