rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Add some details for non visible scrollspy elements (#36625)

Browse Source 
* docs: add some details for non visible scrollspy elements

* Apply suggestions from code review

Co-authored-by: Julien Déramond <julien.deramond@orange.com>

* fix selectors on snippet

* Fix paragraph by a native speaker

Co-authored-by: Mark Otto <markd.otto@gmail.com>

* Update scrollspy.md

* Move from warning to own section

* Update scrollspy.md

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
This commit is contained in:
GeoSot 2022-07-12 02:17:53 +03:00 committed by GitHub
parent a1224482f2
commit 62b3d3cc68
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
site/content/docs/5.2/components/scrollspy.md
View File

@ -16,9 +16,7 @@ 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>`
- Target elements that aren't visible will be ignored and their corresponding nav items will never receive an `.active` class.
Checkout the examples below to see it in action.
- Target elements that are not visible will be ignored. See the [Non-visible elements](#non-visible-elements) section below.
## Examples
@ -330,6 +328,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