如何阻止 Bootstrap offcanvas 滾動網站

Question

我正在使用 Bootstrap offcanvas 作為移動網站的<nav>菜單。 菜單的目標是，當用戶單擊<li>時，它會將它們向下滾動到網站的該部分。 我創建了一個簡單的 js 腳本，單擊 offcanvas 退出按鈕，然后使用 ID 將用戶滾動到網站的該部分。 問題是 offcanvas 然后將網站滾動回其自己的位置。

它確實完成了我需要的操作，直到按鈕再次成為焦點或觸發其他東西，這導致網站滾動回按鈕所在的頂部。

我查看了它並讀到，當您使用它們的模態時，Bootstrap 會在正文中添加一個開放式模態 class，並且我認為當您使用他們的 offcanvas 時它是一個類似的 class，這將刪除滾動條，這會影響它。 如果您使用 js 腳本創建元素，我還看到您應該刪除data-bs-toggle="offcanvas" ，但我不是。 我怎樣才能在網站上實現這種效果？ 下面是<nav>的 JS 文件和 html 。

JAVASCRIPT：

 function ServicePackages(){ const exitBtn = document.getElementById('button-close'); exitBtn.click(); window.location.href = "#service-packages"; } function IndividualServices(){ const exitBtn = document.getElementById('button-close'); exitBtn.click(); window.location.href = "#individual-services"; } function SuspensionSetup(){ const exitBtn = document.getElementById('button-close'); exitBtn.click(); window.location.href = "#suspension-setup"; } function RacePrepPackages(){ const exitBtn = document.getElementById('button-close'); exitBtn.click(); window.location.href = "#race-prep-packages"; } function Contact(){ const exitBtn = document.getElementById('button-close'); exitBtn.click(); window.location.href = "#contact"; } function Home(){ const exitBtn = document.getElementById('button-close'); exitBtn.click(); window.location.href = "#home"; }

HTML：

 <nav class="navbar navbar-expand-lg bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="javascript: return false"> <img class="d-inline-block align-text-bottom" src="assets/logo.png" width="156px" height="45px"> </a> <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navModal" aria-controls="offcanvasRight"> <span class="navbar-toggler-icon"></span> </button> <div class="offcanvas offcanvas-end" tabindex="-1" id="navModal" aria-labelby="offcanvasRightLabel"> <div class="offcanvas-header"> <img class="offcanvas-title d-inline-block align-text-bottom" src="assets/logo.png" width="156px" height="45px"> <button id="button-close" class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body"> <script src="modal.js"></script> <ul class="navbar-nav justify-content-end flex-grow-1 pe-3"> <li class="nav-item"> <a class="nav-link" onclick="ServicePackages()" aria-current="page" href="#service-packages">SERVICE PACKAGES</a> </li> <li class="nav-item"> <a class="nav-link" onclick="IndividualServices()" aria-current="page" href="#individual-services">INDIVIDUAL SERVICES</a> </li> <li class="nav-item"> <a class="nav-link" onclick="SuspensionSetup()" aria-current="page" href="#suspension-setup">SUSPENSION SETUP</a> </li> <li class="nav-item"> <a class="nav-link" onclick="RacePrepPackages()" aria-current="page" href="#race-prep-packages">RACE PREP PACKAGES</a> </li> <li class="nav-item"> <a class="nav-link" onclick="Contact()" aria-current="page" href="#contact">CONTACT</a> </li> <li class="nav-item"> <a class="nav-link active" onclick="Home()" aria-current="page" href="#home">HOME</a> </li> </ul> </div> </div> </div> </nav>

Answer 1

首先，我會嘗試從所有函數中刪除window.location.href = ，因為 href 已經與 HTML 中的錨標記相關聯。

如果這不起作用，我會嘗試通過將其添加到文檔頭來抑制溢出：

<style>
  body {overflow:hidden}
</style>