Inconsistent behavior of Scrollspy after 5.2 update

[jochenboy]

Dear all,

tl;dr: Scrollspy in 5.2 highlights different items depending on scroll direction, in particular items above the screen when scrolling up.

I'm currently updating a project from 5.1.3 to 5.2.0 and I can't get Scrollspy to work in the same way. I have a page which has two DIVs next to each other. The left-hand side DIV contains the NAV menu (table of contents), the right-hand side DIV contains an HTML document. The HTML document (pulled from a database) can become quite lengthy with many sections, so the table of contents may become so long that both DIVs are scrollable. Consequently, the "spy" is not on the body, but on the DIV with the actual content.

With 5.1.3, the two DIVs were set up as:
<nav id="navbar-minutes" class="navbar navbar-light>

And:
<div class="containter-meeting-minutes" data-bs-spy="scroll" data-bs-target="#navbar-minutes" data-bs-offset="160">

Respectively. This worked consistently with 5.1.3 (at least in Chrome and Safari) that when scrolling either way, whatever section was at the top of the right-hand side DIV, was highlighted in the NAV menu on the left. Also, when clicking on a link in the NAV menu, the right-hand side scrolled to the right position, and again the corresponding on the left was highlighted correctly.

With 5.2.0, I have changed the the second DIVs definition to:
<div class="containter-meeting-minutes" data-bs-spy="scroll" data-bs-target="#navbar-minutes" data-bs-root-margin="160px 0px 0px 0px">

But the behavior is very different:

• When scrolling down, whatever section just enters at the bottom of the DIV gets highlighted in the table of contents, instead of when it reaches the top. So when I click on a section, and it is a shorter section (more than once section visible on the screen), it may happen that the highlighting in the NAV menu is one or two items below from where I clicked.
• When scrolling up, the section that is highlighted is the one that just enters the top of the screen, even before it enters the top of the DIV.
• When scrolling up and down alternately in an area of the document where there are three short sections visible on the screen, the highlighting in the table of contents jumps up and down by 4-5 menu entries at once, because it jumps from the section at the bottom of the DIV when scrolling down to the section at (above) the top of the DIV when scrolling up, and vice versa.

Through trial and error, I have now set it to:
<div class="containter-meeting-minutes" data-bs-spy="scroll" data-bs-target="#navbar-minutes" data-bs-root-margin="160px 0px -90% 0px">

This probably breaks the system since I've just moved the bottom margin to very close to the top of my DIV. But at least this gives me very close to the intended behavior when scrolling down, either by scrolling or by clicking on a table of contents entry further down. The section that is highlighted by scrollspy now consistently is the one at or near the top of the right-hand side DIV. WooHoo!

But the highlighting still is all over the place when scrolling up. The section that gets highlighted is always above the visible area.

It feels like the margin isn't applied when scrolling up, only when scrolling down.

Example:

After scrolling down, the section at the top of the screen is correctly highlighted:

After scrolling up (here by clicking on the menu item highlighted in grey), the section highlighted by scrollspy is two items above. The corresponding section is well above the visible area.

Note: the DIV the scrollspy is on is the white area on the right. The 160px offset/top margin accommodates the fixed headings.

Maybe I'm doing it wrong. Maybe I'm using it for something it's not intended for. In any case, I'd appreciate any ideas. Thanks!

[beccahammond]

I'm also seeing similar behavior. I'm updating an existing project from BS 4.5 to 5.2 - the highlighting is not behaving as expected with scrollspy (very far off the target).
The offset is not passing through as suggested in the Deprecated note below the options section here and setting the rootMargin directly doesn't change the behavior at all compared to setting the offset (https://getbootstrap.com/docs/5.2/components/scrollspy/#options).

[Fatbat]

I too am experiencing misaligned nav highlighting - the nav for the section below the chosen one is highlighting instead - and the offset is not working.

[alexatlevel]

I am also experiencing the same - scrollspy is essentially unfunctional for a long single page website. The old behavior (bs4) would trigger scrollspy when the top of the targeted element crossed the top of the bounding element, and you could change the vertical offset. This worked perfectly for a long single page website. Now with intersection observer, the new behavior triggets scrollspy when a portion of the targeted element is visible. This isn't exact at all. Even Bootstrap docs examples are sloppy and imprecise. Intersection observer is great for some things but for scrollspy it's a nightmare!

[frontenddevguy]

I am also having problems with erratic scrollspy behaviour, especially on mobile. The links scroll to the correct place (with a margin-top to accommodate the header), but scrolling through the page on mobile is the proverbial dog's dinner!

It's slightly better after adding "data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50"

[marqu3s]

So, no solution after 2+ years?