问题描述
我在scrollspy Bootstrap 5中发现了一个小问题。调整Windows大小时，导航不正确并且无法刷新。
源代码来自原始引导程序5
https://v5.getbootstrap.com/docs/5.0/components/scrollspy/#refresh
未捕获的TypeError：无法读取null的属性“刷新”
演示：
var dataSpyList = [].slice.call(document.querySelectorAll('[data-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})html {
scroll-behavior: smooth;
}
/*margin padding*/
.py-9 {
padding-top: 7rem;
padding-bottom: 7rem;
}
.my-9 {
margin-top: 7rem;
margin-bottom: 7rem;
}
body {
font-family: system-ui;
background: #f06d06;
color: white;
text-align: center;
}
.py-9 {
padding-top: 7rem;
padding-bottom: 7rem;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous">
<body id="page-top" data-spy="scroll" data-target="#main-nav" data-offset="92">
<!-- ========== { HEADER }========== -->
<header id="main-nav" class="fixed-top nav-dark bg-light border-bottom py-3">
<div class="container">
<!-- Navbar -->
<nav class="js-navbar-scroll navbar navbar-expand-lg navbar-light">
<a class="navbar-brand main-logo" href="#">
MY logo
</a>
<!-- navbar button -->
<button class="navbar-toggler" type="button"
data-toggle="collapse"
data-target="#navbarTogglerDemo"
aria-controls="navbarTogglerDemo"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- collapse menu -->
<div class="collapse navbar-collapse" id="navbarTogglerDemo">
<ul class="navbar-nav nav-hover1 ml-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#hero">Home</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#one">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#two">Skill</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#three">Progress</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#four">Statistic</a>
</li>
</ul>
<div class="text-center my-3 my-lg-0 ml-0 ml-lg-2">
<a class="nav-link btn btn-primary btn-sm btn-block js-scroll-trigger" href="#five">Download
</a>
</div>
</div><!-- end collapse menu -->
</nav><!-- End Navbar -->
</div>
</header><!-- end header -->
<!-- =========={ MAIN }========== -->
<main id="content" role="main">
<!-- section -->
<section id="hero" class="section position-relative bg-light py-9 border-bottom"
>
<h3 class="text-center my-9 py-9">SECTION HERO</h3>
</section>
<!-- section -->
<section id="one" class="section position-relative bg-light py-9 border-bottom"
>
<h3 class="text-center my-9 py-9">SECTION ONE</h3>
</section>
<!-- section -->
<section id="two" class="section position-relative bg-light py-9 border-bottom"
>
<h3 class="text-center my-9 py-9">SECTION TWO</h3>
</section>
<!-- section -->
<section id="three" class="section position-relative bg-light py-9 border-bottom"
>
<h3 class="text-center my-9 py-9">SECTION THREE</h3>
</section>
<!-- section -->
<section id="four" class="section position-relative bg-light py-9 border-bottom"
>
<h3 class="text-center my-9 py-9">SECTION FOUR</h3>
</section>
<!-- section -->
<section id="last" class="section position-relative bg-light py-9 border-bottom"
>
<h3 class="text-center my-9 py-9">SECTION LAST</h3>
</section>
</main>
<!-- end main -->
<!-- =========={ FOOTER }========== -->
<footer class="py-5 bg-dark">
<p class="text-light text-center">copyright 2020</p>
</footer>
<!-- End Footer -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js" integrity="sha384-BOsAfwzjNJHrJ8cZidOg56tcQWfp6y72vEJ8xQ9w6Quywb24iOsW913URv1IS4GD" crossorigin="anonymous"></script>
</body>解决方法
我刚刚从 alpha 版本升级到 beta1，它似乎解决了这个特定问题（确保同时升级 css 和 js 组件）。不确定这是否会为您解决。我没有进行单独的更改，在看到它开始工作之前我做了几个更改，但如果我不得不猜测这将是修复它的那个。
然而，Bootstrap 5 的滚动间谍目前在最新版本 (beta1) 中存在很多问题。
[稍微无关]
在解决了一个问题几天后，我实际上意识到了这一点，即当滚动到 0 以外的任何位置时，scrollspy 会在重新加载页面后计算被监视元素的错误偏移量。github scollspy page reload issue thread。