Scrollspy
BsScrollspy lists the content's elements marked data-scrollspy in a sticky column beside it and marks the section being read (aria-current="location"). It scrolls with the window or with its nearest scrolling ancestor (a scrollable modal body), or with scrollContainer; offset moves the trigger line below a fixed navbar. The list is built once the page is hydrated.
Getting started
The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.
The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.
Installation
The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.
The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.
The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.
Configuration
The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.
The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.
The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.
Usage
The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.
The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.
Sections
The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.
The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.
The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.
Scroll containers
The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.
The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.
The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.
Accessibility
The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.
The list beside this text follows the reader: the entry of the section whose heading last passed the top of the viewport is bold and marked as the current location. Click an entry to scroll its section into place.
Source
import { BsScrollspy } from '@mintplayer/react-bootstrap/scrollspy';<BsScrollspy> <h2 data-scrollspy>Section A</h2> <p>Content for section A…</p> <h2 data-scrollspy>Section B</h2> <p>Content for section B…</p> <h3 data-scrollspy>Subsection B1</h3> <p>Content for subsection B1…</p></BsScrollspy>