diff options
Diffstat (limited to 'site/content/docs/5.2/components/scrollspy.md')
-rw-r--r-- | site/content/docs/5.2/components/scrollspy.md | 37 |
1 files changed, 14 insertions, 23 deletions
diff --git a/site/content/docs/5.2/components/scrollspy.md b/site/content/docs/5.2/components/scrollspy.md index 23afee9423..0b8395b8f5 100644 --- a/site/content/docs/5.2/components/scrollspy.md +++ b/site/content/docs/5.2/components/scrollspy.md @@ -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 @@ -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 |