Bootstrap 5 offcanvas 在关闭时滚动回到顶部

Question

我有一个简单的 bootstrap 5 offcanvas 元素。这包含一个简单的 link 到 html 页面的 body 中的锚点。

我将 offcanvas 配置为没有背景并启用 body 滚动。

现在，当我打开 offcanvas 并单击 link。 body 滚动到页面的该部分。但是当我关闭画布时。 body 滚动回到顶部。我怎样才能让 body 保持原样？

似乎用于打开画布的按钮重新获得了焦点。我试过这样的东西。

var myOffcanvas = document.getElementById('offcanvasExample');
    //var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
    myOffcanvas.addEventListener('hidden.bs.offcanvas', function (event) {
        //event.stopPropagation();
        //event.preventDefault();
        // Give the document focus
        // Remove focus from any focused element
        if (document.activeElement) {
            document.activeElement.blur();
        }
        window.focus();

    });

但是页面一直滚动回到按钮。

亲切的问候

Answer 1

已解决。该按钮不应使用 data-bs-toggle="offcanvas"。如果您为使用 bootstrap 的 javascript 函数切换 offcanvas 的按钮创建点击处理程序，则一切正常。

这是我的代码

document.addEventListener("DOMContentLoaded", function(){
  var myOffcanvas = document.getElementById('offcanvasExample');
  var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas);
  document.getElementById("OpenMenu").addEventListener('click',function (e){
    e.preventDefault();
    e.stopPropagation();
    bsOffcanvas.toggle();
  });
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!-- the Offcanvas button //-->
<button class="nav-link btn btn-outline-primary" id="OpenMenu">open</button>


<!-- the Offcanvas element //-->
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title text-primary" id="offcanvasExampleLabel">Test</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<a href="#test">test</a>
</div>
</div>
<div class="my-5 py-5">
Test content
</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5"><a name="test" id="test">Scroll here</a></div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>
<div class="my-5 py-5">Test content</div>

Answer 2

虽然我不使用 Javascript 操作 offcanvas，但我遇到了类似的问题。在关闭的画布上滚动回到顶部。这里的原因是不同的（我仍然不明白到底发生了什么）。但是，我通过更改打开画布的按钮解决了这个问题，我将 <button type="button"> 标签更改为 <a type="button">.

我写在这里修复它，以防有人有类似的问题。

Answer 3

我遵循了 Roel Van der Plankens 的解决方案并使他的 JS 部分与 ANGULAR 12.

一起工作

如果你的Offcanvas在Header Component中，写这样的：

import { Component, OnInit } from "@angular/core";
import * as bootstrap from "bootstrap";

@Component({
  selector: "app-header",
  templateUrl: "./header.component.html",
  styleUrls: ["./header.component.scss"]
})
export class HeaderComponent implements OnInit {

  ngOnInit(): void {

    const offcanvasNavbar = document.getElementById('offcanvasExample');
    const openOffcanvas = document.getElementById('OpenMenu');

    if (offcanvasNavbar && openOffcanvas != null) {
      const bsOffcanvasNavbar = new bootstrap.Offcanvas(offcanvasNavbar);

      openOffcanvas.addEventListener('click', function () {
        //e.preventDefault();
        //e.stopPropagation();
        bsOffcanvasNavbar.toggle();
      });
    };
  };
};

要完成这项工作，您必须在终端中使用以下命令安装@types/bootstrap：

npm i --save-dev @types/bootstrap

否则无法使用new bootstrap...

与 Roel Van der Plankens 不同，我不需要

e.preventDefault();
e.stopPropagation();

不确定这是因为我的 Bootstrap 版本是 5.1 还是 Angular 12。我把它注释掉了，也许其他人可能需要那部分代码。

Bootstrap 5 offcanvas 在关闭时滚动回到顶部

Bootstrap 5 offcanvas scrolls back to top on close

bootstrap-5