2014-07-12 11:20:15 +02:00
---
2015-08-15 07:45:55 +02:00
layout: docs
2015-08-19 20:29:21 +02:00
title: Scrollspy
2017-05-28 08:01:14 +02:00
description: Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.
2015-08-06 02:47:45 +02:00
group: components
2017-05-28 08:01:14 +02:00
toc: true
2014-07-12 11:20:15 +02:00
---
2017-04-08 22:58:20 +02:00
## How it works
2017-04-02 11:21:04 +02:00
2017-04-08 22:58:20 +02:00
Scrollspy has a few requirements to function properly:
2017-04-02 11:21:04 +02:00
2020-10-25 21:29:58 +01:00
- It must be used on a Bootstrap [nav component ]({{< docsref "/components/navs-tabs" >}} ) or [list group ]({{< docsref "/components/list-group" >}} ).
2017-04-08 22:58:20 +02:00
- Scrollspy requires `position: relative;` on the element you're spying on, usually the `<body>` .
- Anchors (`< a > `) are required and must point to an element with that `id` .
2017-04-02 11:21:04 +02:00
2017-04-08 22:58:20 +02:00
When successfully implemented, your nav or list group will update accordingly, moving the `.active` class from one item to the next based on their associated targets.
2017-04-02 11:21:04 +02:00
2020-10-13 15:37:21 +02:00
{{< callout > }}
2020-09-15 17:29:49 +02:00
### Scrollable containers and keyboard access
If you're making a scrollable container (other than the `<body>` ), be sure to have a `height` set and `overflow-y: scroll;` applied to it—alongside a `tabindex="0"` to ensure keyboard access.
2020-10-13 15:37:21 +02:00
{{< / callout > }}
2020-09-15 17:29:49 +02:00
2014-07-12 11:42:19 +02:00
## Example in navbar
2017-04-08 22:58:20 +02:00
Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well.
2014-07-12 11:42:19 +02:00
2015-04-16 23:07:20 +02:00
< div class = "bd-example" >
2020-03-07 13:09:05 +01:00
< nav id = "navbar-example2" class = "navbar navbar-light bg-light px-3" >
2016-10-13 02:08:15 +02:00
< a class = "navbar-brand" href = "#" > Navbar< / a >
2015-08-13 04:49:08 +02:00
< ul class = "nav nav-pills" >
2017-04-02 11:21:04 +02:00
< li class = "nav-item" >
2021-04-23 13:58:32 +02:00
< a class = "nav-link" href = "#scrollspyHeading1" > First< / a >
2017-04-02 11:21:04 +02:00
< / li >
< li class = "nav-item" >
2021-04-23 13:58:32 +02:00
< a class = "nav-link" href = "#scrollspyHeading2" > Second< / a >
2017-04-02 11:21:04 +02:00
< / li >
2015-08-20 21:22:03 +02:00
< li class = "nav-item dropdown" >
2020-07-22 21:33:11 +02:00
< a class = "nav-link dropdown-toggle" data-bs-toggle = "dropdown" href = "#" role = "button" aria-expanded = "false" > Dropdown< / a >
2019-12-29 02:21:20 +01:00
< ul class = "dropdown-menu" >
2021-04-23 13:58:32 +02:00
< li > < a class = "dropdown-item" href = "#scrollspyHeading3" > Third< / a > < / li >
< li > < a class = "dropdown-item" href = "#scrollspyHeading4" > Fourth< / a > < / li >
2019-12-29 02:21:20 +01:00
< li > < hr class = "dropdown-divider" > < / li >
2021-04-23 13:58:32 +02:00
< li > < a class = "dropdown-item" href = "#scrollspyHeading5" > Fifth< / a > < / li >
2019-12-29 02:21:20 +01:00
< / ul >
2015-08-13 04:49:08 +02:00
< / li >
< / ul >
2014-07-12 11:42:19 +02:00
< / nav >
2020-07-22 21:33:11 +02:00
< div data-bs-spy = "scroll" data-bs-target = "#navbar-example2" data-bs-offset = "0" class = "scrollspy-example" tabindex = "0" >
2021-04-23 13:58:32 +02:00
< h4 id = "scrollspyHeading1" > First heading< / h4 >
< p > This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.< / p >
< h4 id = "scrollspyHeading2" > Second heading< / h4 >
< p > This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.< / p >
2021-05-07 01:00:30 +02:00
< h4 id = "scrollspyHeading3" > Third heading< / h4 >
2021-04-23 13:58:32 +02:00
< p > This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.< / p >
< h4 id = "scrollspyHeading4" > Fourth heading< / h4 >
< p > This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.< / p >
< h4 id = "scrollspyHeading5" > Fifth heading< / h4 >
< p > This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.< / p >
2014-07-12 11:42:19 +02:00
< / div >
< / div >
2020-10-19 11:56:49 +02:00
```html
2020-03-07 13:09:05 +01:00
< nav id = "navbar-example2" class = "navbar navbar-light bg-light px-3" >
2017-04-02 11:21:04 +02:00
< a class = "navbar-brand" href = "#" > Navbar< / a >
< ul class = "nav nav-pills" >
< li class = "nav-item" >
2021-04-23 13:58:32 +02:00
< a class = "nav-link" href = "#scrollspyHeading1" > First< / a >
2017-04-02 11:21:04 +02:00
< / li >
< li class = "nav-item" >
2021-04-23 13:58:32 +02:00
< a class = "nav-link" href = "#scrollspyHeading2" > Second< / a >
2017-04-02 11:21:04 +02:00
< / li >
< li class = "nav-item dropdown" >
2020-07-22 21:33:11 +02:00
< a class = "nav-link dropdown-toggle" data-bs-toggle = "dropdown" href = "#" role = "button" aria-expanded = "false" > Dropdown< / a >
2021-04-23 13:58:32 +02:00
< ul class = "dropdown-menu" >
< li > < a class = "dropdown-item" href = "#scrollspyHeading3" > Third< / a > < / li >
< li > < a class = "dropdown-item" href = "#scrollspyHeading4" > Fourth< / a > < / li >
2019-12-29 02:21:20 +01:00
< li > < hr class = "dropdown-divider" > < / li >
2021-04-23 13:58:32 +02:00
< li > < a class = "dropdown-item" href = "#scrollspyHeading5" > Fifth< / a > < / li >
2019-12-29 02:21:20 +01:00
< / ul >
2017-04-02 11:21:04 +02:00
< / li >
< / ul >
< / nav >
2021-04-23 13:58:32 +02:00
< div data-bs-spy = "scroll" data-bs-target = "#navbar-example2" data-bs-offset = "0" class = "scrollspy-example" tabindex = "0" >
< h4 id = "scrollspyHeading1" > First heading< / h4 >
2017-04-02 11:21:04 +02:00
< p > ...< / p >
2021-04-23 13:58:32 +02:00
< h4 id = "scrollspyHeading2" > Second heading< / h4 >
2017-04-02 11:21:04 +02:00
< p > ...< / p >
2021-05-07 01:00:30 +02:00
< h4 id = "scrollspyHeading3" > Third heading< / h4 >
2017-04-02 11:21:04 +02:00
< p > ...< / p >
2021-04-23 13:58:32 +02:00
< h4 id = "scrollspyHeading4" > Fourth heading< / h4 >
2017-04-02 11:21:04 +02:00
< p > ...< / p >
2021-04-23 13:58:32 +02:00
< h4 id = "scrollspyHeading5" > Fifth heading< / h4 >
2017-04-02 11:21:04 +02:00
< p > ...< / p >
< / div >
2020-10-19 11:56:49 +02:00
```
2014-07-12 11:42:19 +02:00
2017-04-08 22:58:20 +02:00
## Example with nested nav
2017-04-02 11:21:04 +02:00
2017-04-08 22:58:20 +02:00
Scrollspy also works with nested `.nav` s. If a nested `.nav` is `.active` , its parents will also be `.active` . Scroll the area next to the navbar and watch the active class change.
2014-03-17 03:03:53 +01:00
2017-04-02 11:21:04 +02:00
< div class = "bd-example" >
< div class = "row" >
< div class = "col-4" >
2021-04-23 13:58:32 +02:00
< nav id = "navbar-example3" class = "navbar navbar-light bg-light flex-column align-items-stretch p-3" >
2017-04-02 11:21:04 +02:00
< a class = "navbar-brand" href = "#" > Navbar< / a >
< nav class = "nav nav-pills flex-column" >
< a class = "nav-link" href = "#item-1" > Item 1< / a >
< nav class = "nav nav-pills flex-column" >
2020-06-09 15:44:20 +02:00
< a class = "nav-link ms-3 my-1" href = "#item-1-1" > Item 1-1< / a >
< a class = "nav-link ms-3 my-1" href = "#item-1-2" > Item 1-2< / a >
2017-04-02 11:21:04 +02:00
< / nav >
< a class = "nav-link" href = "#item-2" > Item 2< / a >
< a class = "nav-link" href = "#item-3" > Item 3< / a >
< nav class = "nav nav-pills flex-column" >
2020-06-09 15:44:20 +02:00
< a class = "nav-link ms-3 my-1" href = "#item-3-1" > Item 3-1< / a >
< a class = "nav-link ms-3 my-1" href = "#item-3-2" > Item 3-2< / a >
2017-04-02 11:21:04 +02:00
< / nav >
< / nav >
< / nav >
< / div >
< div class = "col-8" >
2020-07-22 21:33:11 +02:00
< div data-bs-spy = "scroll" data-bs-target = "#navbar-example3" data-bs-offset = "0" class = "scrollspy-example-2" tabindex = "0" >
2017-04-02 11:21:04 +02:00
< h4 id = "item-1" > Item 1< / h4 >
2021-04-23 13:58:32 +02:00
< p > This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.< / p >
2017-04-02 11:21:04 +02:00
< h5 id = "item-1-1" > Item 1-1< / h5 >
2021-04-23 13:58:32 +02:00
< p > This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.< / p >
2018-08-16 00:22:52 +02:00
< h5 id = "item-1-2" > Item 1-2< / h5 >
2021-04-23 13:58:32 +02:00
< p > This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.< / p >
2017-04-02 11:21:04 +02:00
< h4 id = "item-2" > Item 2< / h4 >
2021-04-23 13:58:32 +02:00
< p > This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.< / p >
2017-04-02 11:21:04 +02:00
< h4 id = "item-3" > Item 3< / h4 >
2021-04-23 13:58:32 +02:00
< p > This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.< / p >
2017-04-02 11:21:04 +02:00
< h5 id = "item-3-1" > Item 3-1< / h5 >
2021-04-23 13:58:32 +02:00
< p > This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.< / p >
2017-04-02 11:21:04 +02:00
< h5 id = "item-3-2" > Item 3-2< / h5 >
2021-04-23 13:58:32 +02:00
< p > This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.< / p >
2017-04-02 11:21:04 +02:00
< / div >
< / div >
< / div >
< / div >
2014-10-27 06:31:59 +01:00
2020-10-19 11:56:49 +02:00
```html
2021-04-23 13:58:32 +02:00
< nav id = "navbar-example3" class = "navbar navbar-light bg-light flex-column align-items-stretch p-3" >
2017-04-02 11:21:04 +02:00
< a class = "navbar-brand" href = "#" > Navbar< / a >
< nav class = "nav nav-pills flex-column" >
< a class = "nav-link" href = "#item-1" > Item 1< / a >
< nav class = "nav nav-pills flex-column" >
2020-06-09 15:44:20 +02:00
< a class = "nav-link ms-3 my-1" href = "#item-1-1" > Item 1-1< / a >
< a class = "nav-link ms-3 my-1" href = "#item-1-2" > Item 1-2< / a >
2017-04-02 11:21:04 +02:00
< / nav >
2018-03-27 19:06:16 +02:00
< a class = "nav-link" href = "#item-2" > Item 2< / a >
< a class = "nav-link" href = "#item-3" > Item 3< / a >
2017-04-02 11:21:04 +02:00
< nav class = "nav nav-pills flex-column" >
2020-06-09 15:44:20 +02:00
< a class = "nav-link ms-3 my-1" href = "#item-3-1" > Item 3-1< / a >
< a class = "nav-link ms-3 my-1" href = "#item-3-2" > Item 3-2< / a >
2017-04-02 11:21:04 +02:00
< / nav >
< / nav >
< / nav >
2014-10-27 06:31:59 +01:00
2020-07-22 21:33:11 +02:00
< div data-bs-spy = "scroll" data-bs-target = "#navbar-example3" data-bs-offset = "0" tabindex = "0" >
2017-04-02 11:21:04 +02:00
< h4 id = "item-1" > Item 1< / h4 >
< p > ...< / p >
< h5 id = "item-1-1" > Item 1-1< / h5 >
< p > ...< / p >
2018-08-16 00:22:52 +02:00
< h5 id = "item-1-2" > Item 1-2< / h5 >
2017-04-02 11:21:04 +02:00
< p > ...< / p >
< h4 id = "item-2" > Item 2< / h4 >
< p > ...< / p >
< h4 id = "item-3" > Item 3< / h4 >
< p > ...< / p >
< h5 id = "item-3-1" > Item 3-1< / h5 >
< p > ...< / p >
< h5 id = "item-3-2" > Item 3-2< / h5 >
< p > ...< / p >
< / div >
2020-10-19 11:56:49 +02:00
```
2014-03-17 03:03:53 +01:00
2017-04-02 11:21:04 +02:00
## Example with list-group
2017-04-08 22:58:20 +02:00
Scrollspy also works with `.list-group` s. Scroll the area next to the list group and watch the active class change.
2017-04-02 11:21:04 +02:00
< div class = "bd-example" >
< div class = "row" >
< div class = "col-4" >
< div id = "list-example" class = "list-group" >
< a class = "list-group-item list-group-item-action" href = "#list-item-1" > Item 1< / a >
2018-03-27 19:06:16 +02:00
< a class = "list-group-item list-group-item-action" href = "#list-item-2" > Item 2< / a >
2017-04-02 11:21:04 +02:00
< a class = "list-group-item list-group-item-action" href = "#list-item-3" > Item 3< / a >
< a class = "list-group-item list-group-item-action" href = "#list-item-4" > Item 4< / a >
< / div >
< / div >
< div class = "col-8" >
2020-07-22 21:33:11 +02:00
< div data-bs-spy = "scroll" data-bs-target = "#list-example" data-bs-offset = "0" class = "scrollspy-example" tabindex = "0" >
2017-04-02 11:21:04 +02:00
< h4 id = "list-item-1" > Item 1< / h4 >
2021-04-23 13:58:32 +02:00
< p > This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.< / p >
2017-04-02 11:21:04 +02:00
< h4 id = "list-item-2" > Item 2< / h4 >
2021-04-23 13:58:32 +02:00
< p > This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.< / p >
2017-04-02 11:21:04 +02:00
< h4 id = "list-item-3" > Item 3< / h4 >
2021-04-23 13:58:32 +02:00
< p > This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.< / p >
2017-04-02 11:21:04 +02:00
< h4 id = "list-item-4" > Item 4< / h4 >
2021-04-23 13:58:32 +02:00
< p > This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.< / p >
2017-04-02 11:21:04 +02:00
< / div >
< / div >
< / div >
< / div >
2020-10-19 11:56:49 +02:00
```html
2017-04-02 11:21:04 +02:00
< div id = "list-example" class = "list-group" >
< a class = "list-group-item list-group-item-action" href = "#list-item-1" > Item 1< / a >
2018-03-27 19:06:16 +02:00
< a class = "list-group-item list-group-item-action" href = "#list-item-2" > Item 2< / a >
2017-04-02 11:21:04 +02:00
< a class = "list-group-item list-group-item-action" href = "#list-item-3" > Item 3< / a >
< a class = "list-group-item list-group-item-action" href = "#list-item-4" > Item 4< / a >
< / div >
2020-07-22 21:33:11 +02:00
< div data-bs-spy = "scroll" data-bs-target = "#list-example" data-bs-offset = "0" class = "scrollspy-example" tabindex = "0" >
2017-04-02 11:21:04 +02:00
< h4 id = "list-item-1" > Item 1< / h4 >
< p > ...< / p >
< h4 id = "list-item-2" > Item 2< / h4 >
< p > ...< / p >
< h4 id = "list-item-3" > Item 3< / h4 >
< p > ...< / p >
< h4 id = "list-item-4" > Item 4< / h4 >
< p > ...< / p >
< / div >
2020-10-19 11:56:49 +02:00
```
2017-04-02 11:21:04 +02:00
## Usage
2014-03-17 03:03:53 +01:00
2014-07-12 11:42:19 +02:00
### Via data attributes
2020-07-22 21:33:11 +02:00
To easily add scrollspy behavior to your topbar navigation, add `data-bs-spy="scroll"` to the element you want to spy on (most typically this would be the `<body>` ). Then add the `data-bs-target` attribute with the ID or class of the parent element of any Bootstrap `.nav` component.
2014-03-17 03:03:53 +01:00
2020-10-19 11:56:49 +02:00
```css
2014-03-17 03:03:53 +01:00
body {
position: relative;
}
2020-10-19 11:56:49 +02:00
```
2014-07-12 11:42:19 +02:00
2020-10-19 11:56:49 +02:00
```html
2020-07-22 21:33:11 +02:00
< body data-bs-spy = "scroll" data-bs-target = "#navbar-example" >
2014-03-17 03:03:53 +01:00
...
2015-03-01 22:44:10 +01:00
< div id = "navbar-example" >
2014-05-10 00:05:20 +02:00
< ul class = "nav nav-tabs" role = "tablist" >
2014-03-17 03:03:53 +01:00
...
< / ul >
< / div >
...
< / body >
2020-10-19 11:56:49 +02:00
```
2014-03-17 03:03:53 +01:00
2014-07-12 11:42:19 +02:00
### Via JavaScript
After adding `position: relative;` in your CSS, call the scrollspy via JavaScript:
2020-10-19 11:56:49 +02:00
```js
2019-07-31 22:00:11 +02:00
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
2020-10-19 11:56:49 +02:00
```
2014-03-17 03:03:53 +01:00
2020-10-13 15:37:21 +02:00
{{< callout danger > }}
2018-11-28 18:49:34 +01:00
#### Resolvable ID targets required
2014-07-12 11:42:19 +02:00
2015-04-17 01:56:40 +02:00
Navbar links must have resolvable id targets. For example, a `<a href="#home">home</a>` must correspond to something in the DOM like `<div id="home"></div>` .
2020-10-13 15:37:21 +02:00
{{< / callout > }}
2015-04-17 01:56:40 +02:00
2020-10-13 15:37:21 +02:00
{{< callout info > }}
2019-02-19 15:19:02 +01:00
#### Non-visible target elements ignored
2015-04-17 01:56:40 +02:00
2019-02-19 15:19:02 +01:00
Target elements that are not visible will be ignored and their corresponding nav items will never be highlighted.
2020-10-13 15:37:21 +02:00
{{< / callout > }}
2014-07-12 11:42:19 +02:00
### Methods
2019-07-31 22:00:11 +02:00
#### refresh
2014-07-12 11:42:19 +02:00
When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:
2014-03-17 03:03:53 +01:00
2020-10-19 11:56:49 +02:00
```js
2020-07-22 21:33:11 +02:00
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
2019-07-31 22:00:11 +02:00
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
2014-03-17 03:03:53 +01:00
})
2020-10-19 11:56:49 +02:00
```
2014-03-17 03:03:53 +01:00
2019-07-31 22:00:11 +02:00
#### dispose
2017-10-16 16:51:42 +02:00
2020-10-02 13:58:59 +02:00
Destroys an element's scrollspy. (Removes stored data on the DOM element)
2014-03-17 03:03:53 +01:00
2019-07-31 22:00:11 +02:00
#### getInstance
*Static* method which allows you to get the scrollspy instance associated with a DOM element
2020-10-19 11:56:49 +02:00
```js
2019-07-31 22:00:11 +02:00
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
2020-10-19 11:56:49 +02:00
```
2019-07-31 22:00:11 +02:00
2014-07-12 11:42:19 +02:00
### Options
2020-07-22 21:33:11 +02:00
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-` , as in `data-bs-offset=""` .
2014-07-12 11:42:19 +02:00
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-12 23:52:33 +02:00
< table class = "table" >
2017-01-01 01:12:28 +01:00
< thead >
2017-04-28 00:57:10 +02:00
< tr >
< th style = "width: 100px;" > Name< / th >
< th style = "width: 100px;" > Type< / th >
< th style = "width: 50px;" > Default< / th >
< th > Description< / th >
< / tr >
2017-01-01 01:12:28 +01:00
< / thead >
< tbody >
2017-04-28 00:57:10 +02:00
< tr >
2020-06-27 13:28:21 +02:00
< td > < code > offset< / code > < / td >
2017-04-28 00:57:10 +02:00
< td > number< / td >
2020-06-27 13:28:21 +02:00
< td > < code > 10< / code > < / td >
2017-04-28 00:57:10 +02:00
< td > Pixels to offset from top when calculating position of scroll.< / td >
< / tr >
2018-12-11 09:27:04 +01:00
< tr >
2020-06-27 13:28:21 +02:00
< td > < code > method< / code > < / td >
2018-12-11 09:27:04 +01:00
< td > string< / td >
2020-06-27 13:28:21 +02:00
< td > < code > auto< / code > < / td >
2019-07-28 13:02:23 +02:00
< td > Finds which section the spied element is in. < code > auto< / code > will choose the best method to get scroll coordinates. < code > offset< / code > will use the < a href = "https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect" > < code > Element.getBoundingClientRect()< / code > < / a > method to get scroll coordinates. < code > position< / code > will use the < a href = "https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop" > < code > HTMLElement.offsetTop< / code > < / a > and < a href = "https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft" > < code > HTMLElement.offsetLeft< / code > < / a > properties to get scroll coordinates.< / td >
2018-12-11 09:27:04 +01:00
< / tr >
< tr >
2020-06-27 13:28:21 +02:00
< td > < code > target< / code > < / td >
2020-05-06 06:30:43 +02:00
< td > string | jQuery object | DOM element< / td >
2018-12-11 09:27:04 +01:00
< td > < / td >
< td > Specifies element to apply Scrollspy plugin.< / td >
< / tr >
2017-01-01 01:12:28 +01:00
< / tbody >
< / table >
2014-07-12 11:42:19 +02:00
### Events
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-12 23:52:33 +02:00
< table class = "table" >
2017-01-01 01:12:28 +01:00
< thead >
2017-04-28 00:57:10 +02:00
< tr >
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-12 23:52:33 +02:00
< th style = "width: 150px;" > Event type< / th >
2017-04-28 00:57:10 +02:00
< th > Description< / th >
< / tr >
2017-01-01 01:12:28 +01:00
< / thead >
< tbody >
2017-04-28 00:57:10 +02:00
< tr >
2020-06-27 13:28:21 +02:00
< td > < code > activate.bs.scrollspy< / code > < / td >
2017-10-02 00:26:37 +02:00
< td > This event fires on the scroll element whenever a new item becomes activated by the scrollspy.< / td >
2017-04-28 00:57:10 +02:00
< / tr >
2017-01-01 01:12:28 +01:00
< / tbody >
< / table >
2020-10-19 11:56:49 +02:00
```js
2020-07-22 21:33:11 +02:00
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
2019-07-31 22:00:11 +02:00
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
2019-02-10 21:25:51 +01:00
// do something...
2014-03-17 03:03:53 +01:00
})
2020-10-19 11:56:49 +02:00
```
