Skip to content

Commit

Permalink
Move from warning to own section
Browse files Browse the repository at this point in the history
  • Loading branch information
mdo committed Jul 10, 2022
1 parent 830e81a commit 1118fdd
Showing 1 changed file with 14 additions and 23 deletions.
37 changes: 14 additions & 23 deletions site/content/docs/5.2/components/scrollspy.md
Expand Up @@ -16,29 +16,6 @@ Scrollspy toggles the `.active` class on anchor (`<a>`) elements when the elemen

- As you scroll the "spied" container, an `.active` class is added and removed from anchor links within the associated navigation. Links must have resolvable `id` targets, otherwise they're ignored. For example, a `<a href="#home">home</a>` must correspond to something in the DOM like `<div id="home"></div>`


{{< callout warning >}}
**Non-visible elements**

Target elements that aren’t visible will be ignored, and their corresponding nav items will not receive an `.active` class. Scrollspy instances initialized in a non-visible wrapper will ignore all target elements. Use the `refresh` method to check for observable elements once the wrapper becomes visible.

<details>
<summary class="text-muted">Show tab example</summary>

```js
document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
el.addEventListener('shown.bs.tab', () => {
const target = el.getAttribute('data-bs-target')
const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`)
bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()
})
})
```
</details>

{{< /callout >}}


## Examples

### Navbar
Expand Down Expand Up @@ -349,6 +326,20 @@ Scrollspy is not limited to nav components and list groups, so it will work on a
</div>
```

## Non-visible elements

Target elements that aren’t visible will be ignored and their corresponding nav items won't receive an `.active` class. Scrollspy instances initialized in a non-visible wrapper will ignore all target elements. Use the `refresh` method to check for observable elements once the wrapper becomes visible.

```js
document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
el.addEventListener('shown.bs.tab', () => {
const target = el.getAttribute('data-bs-target')
const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`)
bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()
})
})
```

## Usage

### Via data attributes
Expand Down

0 comments on commit 1118fdd

Please sign in to comment.