Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Scroll spy on body breaks page when no scrollbar present

See original GitHub issue

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

The issue

When adding scrollspy to the body element with something like <body data-bs-spy="scroll" data-bs-target="#navbar-scrollspy" data-bs-offset="0" tabindex="0"> the page will break when there is no scroll bar and be fine if there is a scrollbar. This becomes a problem when you don’t know if the viewport will be able to fit the full page or if it needs a scrollbar. The error in console:

Uncaught TypeError: i is null
    _activate scrollspy.js:224
    _process scrollspy.js:191
    An scrollspy.js:80
    <anonymous> scrollspy.js:283
    <anonymous> scrollspy.js:283
    i event-handler.js:102
    N event-handler.js:207
    on event-handler.js:241
    <anonymous> scrollspy.js:281
    <anonymous> bootstrap.bundle.min.js:6
    <anonymous> bootstrap.bundle.min.js:6

What is expected to happen

The page should behave the same way if the page is fully displayed and if the page has a scrollbar.

What exactly breaks

Not sure, something in scrollspy but the main issue for me is that it inexplicably deletes active class from nav-link items in an unrelated (nothing points to it) <ul> masthead with nav.

Sharing initial findings

Missing element of data-bs-target is not the root issue. The correct nav and nav-link targets can exist on the page, but IF (the nav-link element target, e.g. the element with <div>id="about"</div> targeted by <a class="nav-link " href="#about">, does not exist ) && ( the html fits in the viewport) THEN scrollspy breaks. It basically breaks when both: no nav-link item is present, declared or undeclared, and when the page does not have a scroll bar.

I could avoid this being an issue if I only enabled scrollspy in <body> on pages that actually utilize it but with my current suboptimal but simple php templating structure which has a “top.php” (html, body, header) and “bottom.php” (footer, /body, /html) structures it is a bit much to change the entire structure and flow of this site to address this unique bug. I would expect it to work on my pages that utilize it and on my pages that do not utilize it.

Why should this be fixed, a potential valid use case separate from mine:

Lets say someone has a scrollspy activated on body because they will utilize it on the page, but the page is not fully populated yet so for now viewport fits the entire page (X). But upon further user input the page shows new content and the scrollspy is refreshed by the page as specified and the scrollspy is engaged. Problem is the page already broke where I marked the (X).

Reduced test cases

Reduced test case: https://codepen.io/avwon/pen/GRONdbd (reload page when resizing to show a scrollbar or when to show the entire page)

How to test:

NO BREAK (browser resized for scrollbar to show)
BROKEN (browser resized for no scrollbar)

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

Windows

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

Chrome, Firefox

What version of Bootstrap are you using?

v5.1.3

Issue Analytics

State:
Created 2 years ago
Comments:12 (5 by maintainers)

Top GitHub Comments

1reaction

AvWoNcommented, Feb 11, 2022

I will try refreshing scrollspy in a bit, thanks! Small correction to what I said earlier, on my personal project my scripts that generates additional DOM elements are executed before the bootstrap bundle is executed since scripts are executed in order they are encountered in the page. So I am still not sure why there is a different behavior between the codepen (gets stuck on item 2, unstuck when scrolling) and my personal project (gets stuck on item 2, remains stuck when scrolling), but hopefully one is just the byproduct of the other and the current fix you are working on fixes both.

EDIT: I see you made some changes to the preview (stuck on item 1 now) let me know if you want me to give feedback again. Also I tried refreshing scrollspy on my project to reenable/unstuck scrollspy by attaching the following script at the end:

<script type="text/javascript">
        window.addEventListener('load', (event)=>{
            var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'));
            dataSpyList.forEach(function (dataSpyEl) {
                bootstrap.ScrollSpy.getInstance(dataSpyEl)
                    .refresh()
            });
        })
</script>

which did not manage to get it unstuck

0reactions

andrasbarabascommented, Mar 7, 2022

Hey, I use the Bootstrap bundle JS (5.1.3) via CDN in my Angular project and I get the same error sometimes. As far as I’m concerned the error occures whenever the scrollspy activate method is called and there is no defined target for the spy on that specific page (like you said, “when no scrollbar present”). The activate method is triggered upon some predefined events such as window scroll, etc. So I often see the error on my console. Even though it is not some show-stopper issue, I’m kind of searching for a proper solution and would be more than happy if I did not have to switch to local asset fetch instead of the CDN (I managed to fix the error by adding an extra null check right before the activate method call, but as I said I want to stick to the CDN).

I did not spend too much time reproducing the issue but could you confirm whether it is really due to the missing data-bs-target element which is not within the DOM during the very moment when the method is triggered?

Top Results From Across the Web

How to prevent scrollbar from repositioning web page?

1. I had to put the body in a div and apply the margin to the div for it to work (similar to...

Bootstrap Scrollspy -- Tutorials with advanced examples

Bootstrap Scrollspy · Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in ......

Finding/Fixing Unintended Body Overflow - CSS-Tricks

Another minor little trick that helps me sometimes is to scroll over so you can see offending overflow area, and then click and...

Scrollspy · Bootstrap v5.0

If you're making a scrollable container (other than the <body> ), be sure to have a height set and overflow-y: scroll; applied to...

Hide scroll bar, but while still being able to scroll using CSS

Preferably Hide scrollbars only when if all content is visible else user may skip the content · Avoid horizontal scrolling on Web pages...