Bootstrap 5 Scrollspy Options

Bootstrap 5 Scrollspy is an automatic navigation mechanism that automatically updates the scroll position. When we click on the link it automatically scrolls down to the currently active element.

Bootstrap 5 Scrollspy Options: Scrollspy options can be through data attributes or via JavaScript code. We need to append the option name with 'data-bs-' to pass through the data attributes as shown in the example.

• offset: This option specifies the number of pixels from the top of the page that the Scrollspy should start. For example, if you set the offset to 100, the Scrollspy will start tracking when the user scrolls 100 pixels down from the top of the page.
• method: The method option determines how the scroll position is detected. There are two possible values to provide in the method option offset, auto.
• target:  This option specifies the element that the Scrollspy should listen to for scroll events. It can be a CSS selector for the element or a reference to the element itself.

Example 1: In this example, we will demonstrate scrollspy options like offset, and target passing through data attributes.

Output:

Example 2: In this example, we will demonstrate the scrollspy options via JavaScript.

Output:

Reference:https://getbootstrap.com/docs/5.0/components/scrollspy/#options