Bootstrap Offcanvas 导航 - 不要在关闭时重置背景

问题描述

我在一个 offcanvas div 中有很长的链接列表。这些在表单中是因为我想用它们来导航一个很长的背景页面。（实际上，它是一个目录）

offcanvas 愉快地弹出。导航链接有效；将背景页面跳转到正确的位置。万岁！

但是...当您选择并链接并导航背景页面到某个位置，然后关闭画布时，背景页面将重置到页面顶部！啊……

当我关闭offcanvas时，如何防止背景页面重置位置？

感谢您提供的任何帮助。

div.head{
font-weight: bold;
margin-top: 10px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="btn-group btn-group-sm" role="group" aria-label="spec_tools">
    <a class="btn btn-outline-primary" data-bs-toggle="offcanvas" href="#offcanvasNav" role="button" aria-controls="offcanvasNav">Navigator</a>
</div>
    
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNav" aria-labelledby="offcanvasNavLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavLabel">Navigator</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<strong>
<div>
<a href="#item0">Item0</a>
</div>
</strong>
<div class="ms-2">
<a href="#item1">Item 1</a>
</div>
<div class="ms-2">
<a href="#item2">Item 2</a>
</div>

<div class="ms-2">
<a href="#item3">Item 3</a>
</div>

<div class="ms-2">
<a href="#item4">Item 4</a>
</div>

<div class="ms-2">
<a href="#item5">Item 5</a>
</div>
</div>
</div>

<!-- Page Content -->
<div class="head" id="item0">Item 0</div>
<div>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Fusce finibus ullamcorper nunc eu luctus. Etiam congue placerat lorem,id congue massa ornare sed. Morbi imperdiet turpis eu urna semper tincidunt. Praesent ultrices mollis arcu vel elementum. Duis sollicitudin ultrices felis,nec vehicula massa congue in. Sed urna quam,sollicitudin ac felis et,ullamcorper dictum mauris. Morbi eu magna sit amet est placerat mollis sit amet at nisi. Phasellus viverra maximus posuere. Aenean et urna ac metus elementum pretium. Donec eu tortor id libero sollicitudin facilisis sit amet id nibh. Duis id eros tortor.</div>

<div class="head" id="item1">Item 1</div>
<div>Lorem ipsum dolor sit amet,ullamcorper dictum mauris. Morbi eu magna sit amet est placerat mollis sit amet at nisi. Phasellus viverra maximus posuere. Aenean et urna ac metus elementum pretium. Donec eu tortor id libero sollicitudin facilisis sit amet id nibh. Duis id eros tortor.</div>

<div class="head" id="item2">Item 2</div>
<div>Phasellus at efficitur orci. In imperdiet ut purus a semper. Mauris cursus ipsum vel finibus efficitur. Sed sit amet sem euismod,volutpat lacus ac,euismod justo. Pellentesque tincidunt justo in quam vulputate tincidunt. Curabitur porttitor felis arcu,et pellentesque odio malesuada quis. Aliquam hendrerit sapien tortor,eu ornare lorem laoreet interdum. Suspendisse velit lectus,sagittis eget ex nec,dictum finibus ex. Proin eget mollis nisl. Suspendisse porttitor placerat gravida. Vestibulum nec tempor eros,a congue ipsum. Ut est libero,viverra semper dapibus et,consectetur non risus. Cras at mauris pulvinar mauris accumsan ullamcorper. Aliquam nec ex libero. Suspendisse rhoncus erat sit amet tellus congue,sit amet soDales leo faucibus. Fusce risus diam,ullamcorper sit amet pulvinar eu,tempor vulputate eros.</div>

<div class="head" id="item3">Item 3</div>
<div>Lorem ipsum dolor sit amet,ullamcorper dictum mauris. Morbi eu magna sit amet est placerat mollis sit amet at nisi. Phasellus viverra maximus posuere. Aenean et urna ac metus elementum pretium. Donec eu tortor id libero sollicitudin facilisis sit amet id nibh. Duis id eros tortor.</div>

<div class="head" id="item4">Item 5</div>
<div>Phasellus at efficitur orci. In imperdiet ut purus a semper. Mauris cursus ipsum vel finibus efficitur. Sed sit amet sem euismod,tempor vulputate eros.</div>

解决方法

当 offcanvas 关闭时，Bootstrap 会重新聚焦并滚动到 offcanvas 触发元素。我已经打开了一个关于此的错误报告：https://github.com/twbs/bootstrap/issues/34447，但是该行为可能是设计使然。

解决方法：

Bootstrap 当前会检查当 offcanvas 隐藏时触发元素是否在视口中可见。因此，一种解决方法是使用固定定位使触发元素始终可见...

例如

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNav" data-bs-scroll="true" aria-labelledby="offcanvasNavLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavLabel">Navigator</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close" tabindex="-1"></button>
    </div>
    <div class="offcanvas-body">
        ...TOC nav
    </div>
</div>
<div class="container-fluid py-2">
    <div class="row">
        <div class="col-2">
            <!-- fixed position trigger always visible -->
            <button class="btn btn-outline-primary position-fixed" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNav" role="button" id="btnTrigger" aria-controls="offcanvasNav">Navigator</button>
        </div>
        <div class="col">
            <div class="head" id="item0">Item 0</div>
            .. more page content
        </div>
    </div>
</div>

https://codeply.com/p/gALtKp3xd4

bootstrap-5 off-canvas-menu