1

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/

Xian
  • 11
  • 2
  • It does work for me, it highlights the items (A, B, C, and D)? and I can scroll freely. – Kevin M. Mansour Jun 11 '23 at 23:09
  • @KevinM.Mansour, thank you so much for your fast response. For some reason, I could not make it work. I have uploaded a video of the behavior I experienced at Stackblitz. to Youtube: https://youtu.be/B2WNWSidI-k. Just curious, when you open the stackblitz project, it works for you? Thank you so much. – Xian Jun 13 '23 at 10:09

1 Answers1

0

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.

Kevin M. Mansour
  • 2,915
  • 6
  • 18
  • 35