-
-
Notifications
You must be signed in to change notification settings - Fork 78.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ScrollSpy not behaving correctly #36431
Comments
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>
<main>
<div class="wrapper"> <!-- Add Scrollspy here -->
<section id="one">
...
</section>
<section id="two">
...
</section>
<section id="three">
...
</section>
</div>
</main>
</body> |
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. |
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. |
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 |
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.mp4There'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. |
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.movPOC: 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 |
As the issue was labeled with |
Reopened it since a CodePen has been provided by @tranqt1984 in the meantime (haven't checked its content yet) |
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 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(); |
@kenrobbins #36750 this may help you to use |
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. |
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. |
@qofe Can you elaborate on this? |
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 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". |
same issue i have in react when moving downwards it working but moving upward it is not working |
Same issue. ScrollSpy is not working on |
@shikkaba I experienced the same as @qofe. 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. |
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 On page load
When scrolling to where
This will trigger item 6 to be This means that solely depending on the A possible correct implementation would be to combine the 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
Yes, I had |
I have been getting better results when wrapping the entire section that I want to spy on with the For example, instead of doing this (example given in docs):
I will do this:
This way the 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 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! |
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>
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>
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. |
In my use case, ScrollSpy does not work with sections with large height by default, and l noticed that the default threshold |
I completely agree and have the same issue. Following the topic... |
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. |
Another example that scrollspy is not working in Bootstrap 5.3.2 The "Two" options doesn't get activated. If you swap resources to 5.1.3 it's working fine. |
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. |
Has anyone managed to fix this? Even on the documentation page for v5.3 it's not working as it should. |
any updates on this? |
I am having similar issues! |
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. |
I also had to wrap the section in a div with the target id, rather than rely on headings being correctly detected. However, the position of scroll where the id is detected seems erratic, and even depends on speed of scroll. |
Please just revert it back to the previous working version |
It has now been more than two years. |
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
The text was updated successfully, but these errors were encountered: