Scrollspy active elements are discontinuous

[brjann]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

There is an issue (#37302) for this, which was closed with a recommendation to "include the whole wrapper as an observable https://getbootstrap.com/docs/5.2/components/scrollspy/#nested-nav" . But I believe that the other examples should work as expected and not show the discontinuous behavior.

Problem

According to the docs "Scrollspy toggles the .active class on anchor () elements when the element with the id referenced by the anchor’s href is scrolled into view." In Bootstrap 4, the .active class remained even if the referenced element disappeared from view when scrolling down until the next referenced element appears into view. And if one scrolls up, the previous referencing element got the .active class.

However, in Bootstrap 5, the .active class is only set if the referenced element is visible. If one scrolls down/up and not referenced element is in view, no referencing element gets the .active class.

Reduced test cases

The difference in behavior can be seen here, based on the List group example (https://getbootstrap.com/docs/5.3/components/scrollspy/#list-group and https://getbootstrap.com/docs/4.6/components/scrollspy/#example-with-list-group)

• Bootstrap 4.6 (expected behavior; a referencing element is always active) https://codepen.io/brjann/pen/ZYENgxB
• Bootstrap 5.3 (discontinuous behavior; when scrolling, no referencing element is active when no h4 element is in view ) https://codepen.io/brjann/pen/YPzbmdR

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.3 and v4.6