Scroll spy on body breaks page when no scrollbar present
Created by: AvWoN
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:
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