ScrollSpy component in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

How does ScrollSpy track active sections?

In Bootstrap's ScrollSpy component, what does ScrollSpy use to determine which navigation link should be active as you scroll through the page?

A It relies on the browser's URL hash to update the active link.

B It uses CSS :hover selectors to highlight the navigation links.

C It uses click events on navigation links to highlight the active section.

D It listens to the scroll event and checks the vertical position of sections relative to the viewport.

💡 Hint

Think about how the page knows which part is visible while scrolling.

ScrollSpy listens to the scroll event and compares the scroll position with the positions of the target sections. It then updates the active class on the navigation links accordingly.

📝 Syntax

intermediate

Correct ScrollSpy initialization in JavaScript

Which of the following JavaScript snippets correctly initializes ScrollSpy on the element with id 'navbar-example' targeting sections with class '.section'?

A const scrollSpy = new bootstrap.ScrollSpy(document.body, { target: '#navbar-example', offset: 10 });

B const scrollSpy = new bootstrap.ScrollSpy('#navbar-example', { target: '.section' });

C const scrollSpy = new bootstrap.ScrollSpy(document.body, { target: '#navbar-example' });

D const scrollSpy = new bootstrap.ScrollSpy(document.querySelector('#navbar-example'), { target: '.section' });

💡 Hint

ScrollSpy is usually initialized on the scrolling container, often the body.

ScrollSpy should be initialized on the scrolling container (like document.body) with the target option pointing to the navigation element's selector. The target must be a selector string for the nav element, not the sections.

❓ rendering

advanced

What is the visible effect of ScrollSpy on navigation links?

Given a Bootstrap ScrollSpy setup, what visual change happens to the navigation links as you scroll through different sections?

A All navigation links become bold when scrolling starts.

B The link corresponding to the currently visible section gets the 'active' class, usually changing its style.

C The navigation bar hides when scrolling down and shows when scrolling up.

D The background color of the entire page changes based on the section.

💡 Hint

Think about how navigation highlights the current section.

ScrollSpy adds the active class to the navigation link that matches the section currently visible in the viewport, typically changing its color or style to show it is active.

❓ selector

advanced

Which selector does ScrollSpy use to find target sections?

Bootstrap ScrollSpy uses the href attribute of navigation links to find target sections. What selector does it use internally to find these sections?

A It uses the value of the href as an ID selector, e.g., <code>document.querySelector('#section1')</code>.

B It uses the href value as a class selector, e.g., <code>document.querySelector('.section1')</code>.

C It uses the href value as a tag selector, e.g., <code>document.querySelector('section1')</code>.

D It ignores href and uses data attributes instead.

💡 Hint

Href usually points to an ID on the page.

ScrollSpy reads the href attribute of nav links, which should be an ID selector like #section1, and uses document.querySelector to find the corresponding section.

❓ accessibility

expert

How to improve ScrollSpy accessibility for screen readers?

Which practice improves accessibility of a Bootstrap ScrollSpy navigation for screen reader users?

A Add <code>aria-current="true"</code> to the active navigation link to indicate the current section.

B Use only color changes on active links without any ARIA attributes.

C Hide the navigation links from screen readers using <code>aria-hidden="true"</code>.

D Disable keyboard navigation on the navigation links.

💡 Hint

Screen readers need explicit cues about the current item.

Adding aria-current="true" to the active link helps screen readers announce which section is currently active, improving navigation clarity for users relying on assistive technology.

Practice

1. What is the main purpose of the Bootstrap ScrollSpy component?

easy

A. To lazy load images as you scroll

B. To create a fixed header at the top of the page

C. To add animations when scrolling

D. To highlight navigation links based on the page scroll position

Solution

1. Step 1: Understand ScrollSpy functionality

   ScrollSpy tracks which section is visible on the page while scrolling.

2. Step 2: Identify ScrollSpy's effect on navigation

   It highlights the corresponding navigation link to show the active section.

3. Final Answer:

   To highlight navigation links based on the page scroll position -> Option D

4. Quick Check:

   ScrollSpy = Highlight nav links on scroll [OK]

Hint: ScrollSpy links scroll position to nav highlights [OK]

Common Mistakes:

• Confusing ScrollSpy with fixed headers
• Thinking ScrollSpy adds animations
• Assuming ScrollSpy lazy loads content

2. Which attribute is required on the scrollable container to enable Bootstrap ScrollSpy?

easy

A. data-bs-spy="scroll"

B. data-bs-target="#navbar"

C. data-bs-toggle="scrollspy"

D. data-bs-scroll="true"

Solution

1. Step 1: Identify the attribute that activates ScrollSpy

   The attribute data-bs-spy="scroll" tells Bootstrap to watch scroll events.

2. Step 2: Differentiate from other attributes

   data-bs-target points to the nav but does not activate ScrollSpy itself.

3. Final Answer:

   data-bs-spy="scroll" -> Option A

4. Quick Check:

   Activate ScrollSpy = data-bs-spy="scroll" [OK]

Hint: Use data-bs-spy="scroll" to enable ScrollSpy [OK]

Common Mistakes:

• Using data-bs-toggle instead of data-bs-spy
• Confusing data-bs-target as activation attribute
• Adding non-existent data-bs-scroll attribute

3. Given this HTML snippet, what will happen when you scroll the page?

<body data-bs-spy="scroll" data-bs-target="#navbar">
  <nav id="navbar">
    <a href="#section1">Section 1</a>
    <a href="#section2">Section 2</a>
  </nav>
  <div id="section1">Content 1</div>
  <div id="section2">Content 2</div>
</body>

medium

A. The navbar will become fixed at the top when scrolling

B. The page will scroll automatically to section1 on load

C. The link for the section currently visible will be highlighted in the navbar

D. Nothing will happen because ScrollSpy requires JavaScript initialization

Solution

1. Step 1: Analyze the HTML snippet

   The body has data-bs-spy="scroll" and data-bs-target="#navbar" attributes.

2. Step 2: Check ScrollSpy initialization requirements

   Bootstrap 5 supports automatic initialization of ScrollSpy via data attributes without explicit JavaScript calls.

3. Step 3: Expected behavior

   The link corresponding to the section currently visible will be highlighted in the navbar as you scroll.

4. Final Answer:

   The link for the section currently visible will be highlighted in the navbar -> Option C

5. Quick Check:

   ScrollSpy highlights nav links based on scroll position [OK]

Hint: ScrollSpy highlights nav links automatically with data attributes [OK]

Common Mistakes:

• Thinking data attributes alone activate highlighting
• Expecting auto-scroll to sections on load
• Confusing with sticky/fixed navbar behavior

4. What is wrong with this ScrollSpy setup?

<div id="scrollArea" data-bs-spy="scroll" data-bs-target="#menu">
  <nav id="menu">
    <a href="#part1">Part 1</a>
    <a href="#part2">Part 2</a>
  </nav>
  <div id="part1">Content 1</div>
  <div id="part2">Content 2</div>
</div>

medium

A. The scrollable container #scrollArea needs a fixed height and overflow set

B. The nav element must be outside the scrollable container

C. The data-bs-target should point to #scrollArea, not #menu

D. The href attributes in nav links must be full URLs

Solution

1. Step 1: Check ScrollSpy container requirements

   ScrollSpy requires the scrollable container to have a fixed height and overflow: auto or scroll to detect scrolling.

2. Step 2: Identify missing CSS for #scrollArea

   The code lacks CSS to make #scrollArea scrollable, so ScrollSpy won't work properly.

3. Final Answer:

   The scrollable container #scrollArea needs a fixed height and overflow set -> Option A

4. Quick Check:

   Scrollable container needs height + overflow [OK]

Hint: Scrollable container must have fixed height and overflow [OK]

Common Mistakes:

• Not setting height and overflow on scroll container
• Placing nav outside scroll container unnecessarily
• Using wrong data-bs-target attribute
• Using full URLs in href instead of section IDs

5. You want to use ScrollSpy on a page with a fixed top navbar and multiple sections. Which combination of steps is correct to ensure ScrollSpy works properly?

hard

A. Add data-bs-spy="scroll" on navbar, set overflow: hidden; on body, and use full URLs in navbar links

B. Add data-bs-spy="scroll" and data-bs-target on body, set position: relative; on body, and ensure navbar links match section IDs

C. Add data-bs-spy="scroll" on each section, set position: fixed; on navbar, and use # only in links

D. Add data-bs-spy="scroll" on html, set overflow: scroll; on navbar, and use external links in navbar

Solution

1. Step 1: Enable ScrollSpy on the scroll container

   Usually, body is the scroll container, so add data-bs-spy="scroll" and data-bs-target there.

2. Step 2: Set position: relative; on the scroll container

   ScrollSpy requires the scroll container to have position: relative; for correct offset calculations.

3. Step 3: Ensure navbar links correspond to section IDs

   Links in the navbar must have hrefs matching the IDs of the page sections for ScrollSpy to highlight correctly.

4. Final Answer:

   Add data-bs-spy="scroll" and data-bs-target on body, set position: relative; on body, and ensure navbar links match section IDs -> Option B

5. Quick Check:

   ScrollSpy setup = data attributes + position + matching links [OK]

Hint: Set data attributes on body, position relative, matching hrefs [OK]

Common Mistakes:

• Adding data-bs-spy on wrong elements
• Forgetting position: relative on scroll container
• Using full URLs instead of section IDs in links
• Setting overflow on navbar instead of scroll container