Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Issues
  • #35796
Closed
Open
Issue created Feb 06, 2022 by Administrator@rootContributor3 of 3 checklist items completed3/3 checklist items

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:

  • NO BREAK (browser resized for scrollbar to show) 22-02-06_10-14-41_explorer(2022-02)

  • BROKEN (browser resized for no scrollbar) 22-02-06_10-14-21_firefox(Bootstrap_v5_Bug_Report_Template_—_Mozilla_Firefox)

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

Assignee
Assign to
Time tracking