Bootstrap5 scrollspy not working properly on navbar

Question

I am trying to create a scrollspy using bootstrap5.3. I am following the BS5 example to create the html page with the link below.

https://stackblitz.com/edit/web-platform-phnijx?file=index.html

The are two issues with my current code:

1. the scrollspy highlight 'B'
2. the scrollspy doesn't work after you scroll down once. If you scroll up, it won't highlight the corresponding fields

Any suggestions would be great.

Thank you in advance!

I tried to isolate the code into minimal snippet and follow the BS5 examples.

I am expecting it works as a scrollspy with navbar:

https://getbootstrap.com/docs/5.0/components/scrollspy/

Answer 1

It's a problem from Bootstrap's side. As this same exact issue was reported on GitHub. Unfortunately, this problem is reported since May 24, 2022 and it's not fixed yet. Even Bootstrap's official site had a similar issue.

Quoting from a member of the Bootstrap core team:

Table of Contents is using Bootstrap Scrollspy which sometimes behaves weirdly with the current implementation. I'd say it's linked to #36431 and should be fixed when this other issue will be.

In the meantime, either revert to an older version (anything less than 5.2 like 5.1 or 5), or you can actually use a workaround but none of the workarounds worked for me.