ScrollSpy not behaving correctly #36431

omar-abdul · 2022-05-24T07:58:25Z

Scroll spy on body element will only activate the first item on the nav menu and will not update accordingly, Boostrap 5.1.3 works fine but for some reason 5.2 beta doesn't

crftwrk · 2022-05-24T08:07:19Z

Scrollspy changed completely in 5.2. I had the same problem and figured out that Scrollspy must be added to the wrapping element of the sections. This is usually NOT the <body>.

<body>
  <main>
    <div class="wrapper"> <!-- Add Scrollspy here -->
      <section id="one">
        ...
      </section>
      <section id="two">
        ...
      </section>
      <section id="three">
        ...
      </section>
    </div>
  </main>
</body>

mdo · 2022-05-24T17:29:00Z

Bug reports must include a live demo of the issue. Per our contributing guidelines, please create a reduced test case via CodePen or JS Bin and report back with your link, Bootstrap version, and specific browser and operating system details.

This is a saved reply.

github-actions · 2022-05-24T17:29:22Z

Hello @omar-abdul. Bug reports must include a live demo of the issue. Per our contributing guidelines, please create a reduced test case on CodePen or JS Bin and report back with your link, Bootstrap version, and specific browser and Operating System details.

mastercoms · 2022-05-29T02:15:39Z

Scrollspy has clearly regressed, even on the docs. The prior behavior was to make a link active if its associated element reached the scroll top. Now, it seems to move the active state if one element is more visible than the other. This does not get the same results, and has very strange behavior in various different scenarios which expected the previous behavior. This is just the coded behavior, it's not browser dependent.

Here is an example of the difference on the docs page itself.

scrollspy.mp4

mastercoms · 2022-05-29T02:30:37Z

Here's one example of how it broke. This is just me making the paragraph longer on the 5.2 docs.

scrollspy-long-section-heading.mp4

There's just no active link, since the heading is not visible. There is absolutely no way to handle this correctly with the current implementation, since if you have a wrapper element around each heading and paragraph, then it does not activate properly at all (since the large wrapper element will not satisfy the thresholds properly). And you can fiddle around with the root margin and maybe thresholds to help fit the content within the intersection parameters, but it will be specific to each section, so there is no setup that works with varying bits of spied content sections.

tranqt1984 · 2022-06-10T19:26:37Z

I have the same issue with version 5.2 regarding the ScrollSpy skipping to the newly observed element when scrolling. This does not provide a good user experience and will confuse the user as they are scrolling.

In this video, I updated the height from 200px to 600px which shows the same issue I'm having when using the ScrollSpy.

Screen.Recording.2022-06-10.at.12.18.10.PM.mov

POC: IntersectionObserver observing the element that is being scrolled into the viewport which mimics the ScrollSpy buggy behavior. https://codepen.io/byondsick12/pen/oNEdqzW

POC: This is my current solution... https://codepen.io/byondsick12/pen/wvyNqqd?editors=0111

github-actions · 2022-06-30T00:14:49Z

As the issue was labeled with awaiting-reply, but there has been no response in 14 days, this issue will be closed. If you have any questions, you can comment/reply.

julien-deramond · 2022-06-30T06:03:41Z

Reopened it since a CodePen has been provided by @tranqt1984 in the meantime (haven't checked its content yet)

kenrobbins · 2022-07-14T18:08:44Z

I noticed this issue as well. I have little experience with JS, but from what I read, it seems like with the smallest threshold at 0.1, that means that 10% of an element has to be inside the observer rectangle before the callback is called. That means if an element is more than 10x the height of the observer rectangle, this will never occur, which is why making the paragraph longer broke it.

Regarding the other issue with increasing the height of the spied element causing the spy to jump from 1 to 4 and then from 5 to 2, the observed rectangle is big enough that multiple elements are already in the observer rectangle, so the next one to enter it is not always the one immediately after the active element.

To solve this, I made the threshold 0 so that when any pixel enters the observer rectangle, the callback is called. To avoid multiple elements being inside the observer rectangle, I made the observer rectangle quite small and made the content elements have a minimum height. I placed the observer rectangle just below the top of the spied element. Whatever element is in this area should be highlighted. To do that, I set the root margin to -10% 0px -70%. I also set the minimum height of the content elements to half of the spied element. Depending on use case, I'm sure there are other techniques to accomplish the same.

Anyway, my hacky solution (again, I'm not a frontend programmer) is:

spy-container {
  min-height: calc(100vh / 2.0);
}

<main ... data-bs-root-margin="-10% 0px -70%">
  <div class="spy-container"></div>
  <div class="spy-container"></div>
  ...

    ss = bootstrap.ScrollSpy.getInstance("main");
    ss._getNewObserver = () => { 
      const options = {
        root: ss._rootElement,
        threshold: [0],
        rootMargin: ss._getRootMargin()
      };
      return new IntersectionObserver(entries => ss._observerCallback(entries), options);
    }
    ss._observer = null;
    ss.refresh();

GeoSot · 2022-07-16T11:55:43Z

@kenrobbins #36750 this may help you to use threshold properly

Khaldei · 2022-08-02T20:25:47Z

There are additional pieces that are not working here. They are visible directly on the demo site. For example, navigate to...

https://getbootstrap.com/docs/5.0/components/scrollspy/#item-1-2

Scroll to "Example with nested nav"

You will notice that the scrollspy navbar is now off by two elements.

"Item 1" in the navbar is now linked to "Item 1-2"

If you scroll up to the "Item 1", nothing at all is highlighted.

And if you scroll down, the offsets continue.

qofe · 2022-09-14T17:00:54Z

Posting in case it helps anyone else -- As per the original post about Scrollspy not working on the 'body' element in 5.2. I was going through the steps to make a code-pen and found through that exercise it worked just fine. My issue was a conflict I had in the 'overflow' attribute on the 'body'. Once I cleared that up, it worked as expected.

shikkaba · 2022-10-22T00:47:19Z

My issue was a conflict I had in the 'overflow' attribute on the 'body'. Once I cleared that up, it worked as expected.

@qofe Can you elaborate on this?

iMattPro · 2022-12-15T05:02:57Z

Is there any update on this? Scrollspy and the Docs are awful now. Before Scrollspy when spying on a list of links, would highlight when the target reached the top of the viewport, but now it highlights just when the target is visible in the window anywhere. There's absolutely no guidance on how to tweak these root margins and thresholds to at least recreate the original scroll spy behavior from before 5.2 where it highlights when the target is at the top of the viewport.

usa-usa-usa-usa · 2022-12-30T02:57:51Z

I am experiencing the same issue. If a section is too short to consume enough of the vieweport, the nav item is never actually navigating.

I'd prefer that whatever is at the top of the screen is what is deemed "active".

SekarMurugesan · 2023-01-03T13:33:48Z

same issue i have in react when moving downwards it working but moving upward it is not working

suhailkc · 2023-01-17T06:28:56Z

Same issue. ScrollSpy is not working on

marcus-at-localhost · 2023-01-19T17:59:30Z

@shikkaba I experienced the same as @qofe.
The issue, described in the very first post, is having something like this:

body{
	overflow-x: hidden; /* or auto or scroll */
}

and it was resolved by doing something like this:

body{
	overflow-x: unset; /* or initial */
}

I don't say that's generally the case for this not working, but overflow is likely the issue.

leroynas · 2023-01-24T19:51:29Z

I am actually working on a custom scroll-spy for a company. I was trying to get inspiration by checking the bootstrap implementation, however I found out that the IntersectionObserver only returns entries that changed in visibility. However it can be that there are 10 entries visible at load. These entries are processed, and the first entry is visible (almost always during load). When you scroll down, only entries that change in visibility are available so 11, then 12, then 13 (with entry.isIntersecting true). And likewise elements 1, then 2, then 3 (with entry.isIntersecting false).

On page load

|--------------------------------------------------|
|  item 1                                          |
|  item 2                                          |
|  item 3                                          |
|  item 4                                          |
|--------------------------------------------------|
   item 5
   item 6

new IntersectionObserver((entries) => {
  console.log(entries);
});

// Result: [
//   { id: 1, isIntersecting: true, ... },
//   { id: 2, isIntersecting: true, ... },
//   { id: 3, isIntersecting: true, ... },
//   { id: 4, isIntersecting: true, ... },
//   { id: 5, isIntersecting: false, ... },
//   { id: 6, isIntersecting: false, ... },
// ]

When scrolling to where item 6 is visible and item 1 isn't will result in this

   item 1
|--------------------------------------------------|
|  item 2                                          |
|  item 3                                          |
|  item 4                                          |
|  item 5                                          |
|--------------------------------------------------|
   item 6


new IntersectionObserver((entries) => {
  console.log(entries);
});

// Result:

// Result: [
//   { id: 1, isIntersecting: false, ... },
//   { id: 6, isIntersecting: true, ... },
// ]

This will trigger item 6 to be active where actually item 2 is the first visible item.

This means that solely depending on the IntersectionObserver is not possible. Also when there is nog change in visible elements it can be possible that another scroll-spy target should be made active.

A possible correct implementation would be to combine the IntersectionObserver with a onscroll where the IntersectionObserver is used to save all visible elements in some array/object and the onscroll callback uses these visible elements to determine which one is the first visible (of course only intersecting elements can be active), I expect this first option will reduce the load of the onscroll callback. Or only using a onscroll (basically going back to version 5.1).

Hope this can be of any help. I could share the vue composable implementation when I'm done however this will have to be adjusted for the needs of bootstrap (just inspiration).

Description ~~~~~~~~~~~ Since the bootstrap scroll spy is buggy a replacement has been introduced, dropping the typoscript configuration constant `pizpalue.menu.scroll.offset` in favor of `pizpalue.menu.scroll.rootMargin`. Corrective action ~~~~~~~~~~~~~~~~~ Review the typoscript scroll configuration. Related: twbs/bootstrap#36431

qofe · 2023-03-08T20:41:43Z

My issue was a conflict I had in the 'overflow' attribute on the 'body'. Once I cleared that up, it worked as expected.

@qofe Can you elaborate on this?

Yes, I had
`body {overflow-x:hidden; }
in top of my styles. Removed overflow setting, changed nothing else, and that eliminated the scrollspy issue described in the first post.

davidtmiller · 2023-03-21T19:36:21Z

I have been getting better results when wrapping the entire section that I want to spy on with the id target.

For example, instead of doing this (example given in docs):

<h4 id="scrollspyHeading1">First heading</h4>
<p>...</p>

I will do this:

<div id="scrollspyHeading1">
    <h4>First heading</h4>
    <p>...</p>
</div>

This way the id target is in the viewport for most of the time. This does seem to mess things up a bit when I have one section that is smaller than another that is also within the viewport.

My implementation is very similar to the old Bootstrap 3 docs with nested nav items that appear when the parent has the active state (like the sidebar here https://getbootstrap.com/docs/3.4/components/) making it very important to have the parent being spied on at all time.

I played around with the rootMargin property as well, similar to what was done in the docs, bringing it to rootMargin: '0px 0px -35%' in my case which seemed to help.

Everything seems to be working when scrolling down, but when reaching the bottom of the page and scrolling back up, there are a lot of issues. The active item spied, when clicking on a menu link, after getting to the bottom of the page is inaccurate and sometimes no active item is picked up. Some items don't receive the active state at all, especially when scrolling back up the page versus clicking on a menu link. I am thinking that this has to do with the last scrollspy target section being very short in height, so it messes with the positioning when going back up.

Just some observations and suggestions in case they help progress this issue further!

Fatbat · 2023-04-24T22:06:47Z

I have been getting better results when wrapping the entire section that I want to spy on with the id target.

Yeah, I wrap the content with a section that references each scroll spy target and it doesn't help. The "Home" entry isn't working either. This has been broken for a while now.

Add Bootstrap 3.4.1 along with the dependency, jquery 3.7. Newer Bootstrap doesn't have working Scrollspy[1]. Thus we are using v3.4.1. [1]: twbs/bootstrap#36431 Signed-off-by: Yasushi SHOJI <yashi@spacecubics.com>

iMattPro · 2023-05-25T19:28:34Z

So this issue just being tossed aside?

julien-deramond · 2023-05-25T19:40:49Z

So this issue just being tossed aside?

It's not being tossed aside. We're focusing right now on the v5.3.0 release. Then we'll try to define and prioritize what comes next. I'll keep in mind this one. Please understand that there's a huge amount of work to do in Bootstrap, and everybody does it in their spare time.

itchyny · 2023-06-15T00:53:42Z

In my use case, ScrollSpy does not work with sections with large height by default, and l noticed that the default threshold [0.1, 0.5, 1], typically 0.1, is not good for large height section . For me, data-bs-threshold="0,1" data-bs-root-margin="-30% 0% -70%" fixed the issue. (EDIT: Adding display: flow-root to the sections is also important to disable gaps between sections caused by child margins.)

gettonet · 2023-07-02T09:51:10Z

Is there any update on this? Scrollspy and the Docs are awful now. Before Scrollspy when spying on a list of links, would highlight when the target reached the top of the viewport, but now it highlights just when the target is visible in the window anywhere. There's absolutely no guidance on how to tweak these root margins and thresholds to at least recreate the original scroll spy behavior from before 5.2 where it highlights when the target is at the top of the viewport.

I completely agree and have the same issue. Following the topic...

iMattPro · 2023-09-04T00:24:11Z

So this issue just being tossed aside?

It's not being tossed aside. We're focusing right now on the v5.3.0 release. Then we'll try to define and prioritize what comes next. I'll keep in mind this one. Please understand that there's a huge amount of work to do in Bootstrap, and everybody does it in their spare time.

All I meant was, this Issue is no longer assigned to any project, so I see this falling through the cracks. It's already been an open issue and a problem for 15 months.

M-Yankov · 2024-01-24T16:46:27Z

Another example that scrollspy is not working in Bootstrap 5.3.2
Windows 10 64-bit Firefox 112.0, (MS Edge 120.0.2210.144)
https://jsfiddle.net/2oxrkzyb/

The "Two" options doesn't get activated.

If you swap resources to 5.1.3 it's working fine.

bytes-commerce · 2024-02-14T08:38:29Z

What I figured is that the ScrollSpy seems to work when wrapping the seciont and making clear sections with that.

However, especially in responsive view (iPhone - roughly 400px) - it seems that very large sections are again not properly tracked by ScrollSpy. I am just checking out if it is an issue with the zIndex but that'd surprise me as of now.

For example my whole page has a total height of 16630 px, and the largest section clocks in with 7350 pixels. I'd add screenshots but its not giving much information in responsive view - one time the active class is added to a nav, one time it isn't.

peterstavrou · 2024-02-24T08:13:36Z

Has anyone managed to fix this? Even on the documentation page for v5.3 it's not working as it should.

cwildfoerster · 2024-04-08T10:30:59Z

any updates on this?

joshvillarreal · 2024-04-09T15:18:38Z

I am having similar issues!

sohammondal · 2024-05-06T09:00:19Z

Hello everyone, I am using this feature in a Nextjs SSR app and it was working sporadically for me. I had initially implemented it using the #via-data-attributes approach.

However when I switched initialisation to the #via-javascript approach it worked fine consistently.

On the client side, if you do something like this, it should work for you as well -

  useEffect(() => {

    import("bootstrap").then((bootstrap) => {
      new bootstrap.ScrollSpy("#sections-wrapper", {
        target: ".sidebar-nav",
      });
    });

  }, []);

If you still prefer the #via-data-attributes approach, then you would need to run getOrCreateInstance on the client side to get it working.

In general, its not a hack but an alternate approach as mentioned in the official documentation.

frontenddevguy · 2024-05-13T16:27:53Z

I also had to wrap the section in a div with the target id, rather than rely on headings being correctly detected.
That improves the behaviour somewhat, and avoids there being 'dead space' between highlighted items when there are long chunks of text.

However, the position of scroll where the id is detected seems erratic, and even depends on speed of scroll.

frontenddevguy · 2024-05-16T07:49:43Z

So this issue just being tossed aside?

It's not being tossed aside. We're focusing right now on the v5.3.0 release. Then we'll try to define and prioritize what comes next. I'll keep in mind this one. Please understand that there's a huge amount of work to do in Bootstrap, and everybody does it in their spare time.

Please just revert it back to the previous working version

Fatbat · 2024-05-17T12:22:01Z

So this issue just being tossed aside?

It's not being tossed aside. We're focusing right now on the v5.3.0 release. Then we'll try to define and prioritize what comes next. I'll keep in mind this one. Please understand that there's a huge amount of work to do in Bootstrap, and everybody does it in their spare time.

It has now been more than two years.

mdo added js awaiting-reply labels May 24, 2022

github-actions bot closed this as completed Jun 30, 2022

julien-deramond reopened this Jun 30, 2022

julien-deramond removed the awaiting-reply label Jun 30, 2022

GeoSot mentioned this issue Jul 28, 2022

ScrollSpy: make the threshold option configurable #36750

Merged

julien-deramond added the v5 label Dec 15, 2022

mvanier mentioned this issue Feb 15, 2023

Clicking on right sidebar entry highlights wrong item executablebooks/sphinx-book-theme#678

Closed

yufeih mentioned this issue Mar 15, 2023

Create more attractive themes as similar to other static website generator dotnet/docfx#2298

Closed

11 tasks

yufeih mentioned this issue Mar 21, 2023

[Bug] Modern template does not support scroll spy dotnet/docfx#8539

Open

julien-deramond mentioned this issue May 14, 2023

Bug in the Browse Feature on Bootstrap Website #38595

Closed

3 tasks

peytondmurray mentioned this issue Aug 31, 2023

[Doc] The nav bar on the right side is not activated correctly when I clicked it ray-project/ray#33318

Closed

llewelld mentioned this issue Oct 12, 2023

Migrate to Bootstrap 5x alan-turing-institute/AutSPACEs#631

Merged

14 tasks

kir12 mentioned this issue Mar 11, 2024

redesign day indicators TouhouFest/touhoufest-webapp#8

Open

davidornelas11 mentioned this issue Jun 1, 2024

WS2-2029: Anchor Menu links do not properly highlight the active area ASUWebPlatforms/webspark-ci#435

Merged

11 tasks

Jenselme mentioned this issue Sep 11, 2024

Correct how the progression is displayed in the table of content Jenselme/legadilo#248

Open

ScrollSpy not behaving correctly #36431

ScrollSpy not behaving correctly #36431

Comments

omar-abdul commented May 24, 2022

crftwrk commented May 24, 2022 • edited Loading

mdo commented May 24, 2022

github-actions bot commented May 24, 2022

mastercoms commented May 29, 2022 • edited Loading

mastercoms commented May 29, 2022 • edited Loading

tranqt1984 commented Jun 10, 2022 • edited Loading

github-actions bot commented Jun 30, 2022

julien-deramond commented Jun 30, 2022

kenrobbins commented Jul 14, 2022

GeoSot commented Jul 16, 2022 • edited Loading

Khaldei commented Aug 2, 2022 • edited Loading

qofe commented Sep 14, 2022

shikkaba commented Oct 22, 2022

iMattPro commented Dec 15, 2022 • edited Loading

usa-usa-usa-usa commented Dec 30, 2022

SekarMurugesan commented Jan 3, 2023

suhailkc commented Jan 17, 2023

marcus-at-localhost commented Jan 19, 2023

leroynas commented Jan 24, 2023 • edited Loading

qofe commented Mar 8, 2023

davidtmiller commented Mar 21, 2023 • edited Loading

Fatbat commented Apr 24, 2023 • edited Loading

iMattPro commented May 25, 2023

julien-deramond commented May 25, 2023

itchyny commented Jun 15, 2023 • edited Loading

gettonet commented Jul 2, 2023

iMattPro commented Sep 4, 2023 • edited Loading

M-Yankov commented Jan 24, 2024 • edited Loading

bytes-commerce commented Feb 14, 2024

peterstavrou commented Feb 24, 2024

cwildfoerster commented Apr 8, 2024

joshvillarreal commented Apr 9, 2024

sohammondal commented May 6, 2024

frontenddevguy commented May 13, 2024

frontenddevguy commented May 16, 2024

Fatbat commented May 17, 2024

crftwrk commented May 24, 2022 •

edited

Loading

mastercoms commented May 29, 2022 •

edited

Loading

mastercoms commented May 29, 2022 •

edited

Loading

tranqt1984 commented Jun 10, 2022 •

edited

Loading

GeoSot commented Jul 16, 2022 •

edited

Loading

Khaldei commented Aug 2, 2022 •

edited

Loading

iMattPro commented Dec 15, 2022 •

edited

Loading

leroynas commented Jan 24, 2023 •

edited

Loading

davidtmiller commented Mar 21, 2023 •

edited

Loading

Fatbat commented Apr 24, 2023 •

edited

Loading

itchyny commented Jun 15, 2023 •

edited

Loading

iMattPro commented Sep 4, 2023 •

edited

Loading

M-Yankov commented Jan 24, 2024 •

edited

Loading