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

Question

我在画布 div 中有一长串 link。这些在表单中是因为我想用它们来导航一个很长的背景页面。（实际上，它是一个 table 的内容）

画布愉快地弹出来。导航 link 工作；将背景页面跳转到正确的位置。万岁！

但是...当您选择并 link 并将背景页面导航到某个位置，然后关闭 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, 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="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, 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="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, 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>

Answer 1

当画布关闭时，

Bootstrap 正在重新聚焦并滚动到画布触发元素。我已就此打开错误报告：https://github.com/twbs/bootstrap/issues/34447，但该行为可能是设计使然。

解决方法：

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

例如，

<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 Offcanvas 导航 - 关闭时不重置背景

Bootstrap Offcanvas navigation - don't reset background on close

off-canvas-menu

bootstrap-5