Scrollspy
Scrollspy Example
In the following example, observe the link active color change as you scroll the page up and down. Select the link to navigate to the top or bottom scrollspy targets.
NOTE: The scrollspy configuration settings also includes the scrollspyCallback function, where the event argument is used to show the link target Id in an alert.
<div class="scrollspy-target" id="scrollspyTop"></div>
<div id="exampleMenu" class="background-accent-2-dark rounded-md dock-top-center top-sm col-padding-md">
<div class="text-center pad-sm">
Scroll Activators
</div>
<div class="text-center text-sm pad-sm">
Click links below to move to a scrollspy target and show its id.
</div>
<div class="row justify-content-center text-underline">
<div class="col-fixed">
<a href="#scrollspyTop" data-scrollspy="#scrollspyTop" class="color-light">Top</a>
</div>
<div class="col-fixed">
<a href="#scrollspyBottom" data-scrollspy="#scrollspyBottom" class="color-light">Bottom</a>
</div>
</div>
</div>
<div class="scrollspy-target" id="scrollspyBottom"></div>
<div id="alertContainerScrollspy"></div>
HTML
webui.ready( () => {
ui("#exampleMenu").scrollspyControl({
activatorSelector: "div > div > a",
activatorActiveClass: "color-info",
activatorActiveStyle: null,
scrollTargetClass: "scrollspy-target",
scrollTargetOffset: 200,
activatorCallback: scrollspyCallback
});
function scrollspyCallback(e) {
alertContainerScrollspy.showInfoAlert(`<div class="pad-left-xl text-sm">${e.target.getAttribute("href")}</div>`, true);
}
var alertContainerScrollspy = ui("#alertContainerScrollspy").alertControl({
position: "bottom-center",
displayOrder: "descending",
duration: 3000,
width: "12rem",
autoHide: true,
showHeader: false
});
});
JS
Scrollspy Classes
There is only one class used by the scrollspy componnet.
| Class | Description |
|---|---|
| scrollspy | Defines a scrollspy target element. |
Data Attributes
The following data attribute is used by the scrollspy control.
| Attribute | Description |
|---|---|
| data-scrollspy | Specifies the target element that will be scrolled to. |
Settings
Javascript settings available for the scrollspy control.
| Setting | Description |
|---|---|
| activatorSelector | Specifies the CSS selector for scrollspy activators relative to the scrollspy root container element. Example: "div > div > a" |
| activatorActiveClass | The CSS class that will be toggled on the scrollspy activator when targets are scrolled in and out of view. |
| activatorActiveStyle | The CSS style that will be toggled on the scrollspy activator when targets are scrolled in and out of view. This setting will override properties set using activatorActiveClass. |
| scrollTargetClass | The CSS class present on the scrollspy targets. |
| scrollTargetOffset | The offset in pixels before a target is considered to be in view. |
| activatorCallback | A function that will be called when a scrollspy activator is triggered. |