HxScrollspy

Bootstrap Scrollspy component.

How it works

Scrollspy needs two components to work together. The HxScrollspy component to wrap the area to spy on and the HxNav or a list-group (with HxScrollspyNavLinks) to represent the navigation. These have to be associated using HxScrollspy.TargetId parameter. For more details see also Bootstrap documentation.

The scrollspy navigation has to use custom HxScrollspyNavLink to workaround the <base> Blazor requirement and unability of Bootstrap to interpret the page#fragment form of link.

For anchor-fragment navigation (<a href="#id">) to work the page have to host HxAnchorFragmentNavigation component.

Static content with HxNav navigation

§ 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc maximus facilisis lobortis. Sed non nisi mollis, hendrerit augue sed, facilisis leo. Aliquam dapibus malesuada quam quis luctus. Phasellus placerat mi vel aliquam ullamcorper. Sed sit amet erat a mauris viverra egestas. Praesent efficitur odio sed orci iaculis accumsan. Sed quis quam suscipit, scelerisque velit porttitor, tristique enim. Pellentesque ac magna et metus venenatis pellentesque ullamcorper vitae felis. Vestibulum ut est mi. Ut at dignissim turpis. Pellentesque et magna non massa malesuada consectetur. Morbi in lorem nunc. Integer congue mi non sem consectetur suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus.

§ 2

Nam id consequat augue. Nunc sit amet nunc id ligula ornare porta quis id nisl. Vestibulum ultricies ex mauris, id viverra nibh congue vitae. Proin varius eget urna ut iaculis. Quisque molestie libero et nisi venenatis tincidunt. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec dapibus risus eu ipsum pharetra, vitae viverra nibh dictum. Nulla nec faucibus mauris, ac iaculis lacus. Integer eu sem odio. Quisque luctus nulla elementum, sollicitudin justo eget, ultricies odio. Aliquam viverra non sapien a tincidunt.

§ 3

Sed a aliquet nisi. Pellentesque placerat, turpis sit amet placerat eleifend, tellus turpis consectetur risus, ac scelerisque lectus purus eget turpis. Duis non nunc a lacus sagittis fringilla a quis purus. Ut scelerisque, dolor in pretium mollis, tellus sapien commodo turpis, sed faucibus ante magna et ex. Nunc nec lectus arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce egestas finibus erat a vehicula. Suspendisse sit amet sagittis sem. Etiam porttitor lobortis neque, non gravida nisi egestas sed. Vivamus dignissim lectus ut turpis ultricies, ac aliquam justo convallis.

§ 4

Nulla eu tempor diam, a ultrices orci. Aenean massa lectus, euismod non fringilla nec, sagittis ut nisl. Aliquam eleifend nulla blandit urna eleifend, a viverra orci sodales. In suscipit scelerisque lectus, a sagittis ex volutpat at. Maecenas quis tortor elementum ex vulputate bibendum. Sed rutrum sapien leo, a euismod lacus vehicula eget. Suspendisse sed metus eu arcu gravida vulputate sit amet iaculis lacus. Pellentesque bibendum neque quam, fringilla posuere ex efficitur eu. Pellentesque pellentesque tincidunt est eu molestie. Ut finibus sit amet nisi in finibus. Nulla et elit ipsum. Ut eros urna, vehicula vitae neque sed, hendrerit tempus nunc.

§ 5

Proin vitae faucibus ligula, vel blandit erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla viverra nulla a tristique egestas. Pellentesque vel tristique arcu, a consequat nunc. Etiam massa sem, lacinia id lacinia id, laoreet nec turpis. Fusce et ex bibendum, commodo ligula at, volutpat elit. Sed ac est dapibus, molestie odio sed, condimentum ante. Quisque pretium nulla nisi, nec sagittis est vehicula in. Proin malesuada ultrices quam, vel venenatis magna consectetur eu. Praesent consectetur orci ut ligula lacinia finibus.

Static content with list-group navigation

§ 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc maximus facilisis lobortis. Sed non nisi mollis, hendrerit augue sed, facilisis leo. Aliquam dapibus malesuada quam quis luctus. Phasellus placerat mi vel aliquam ullamcorper. Sed sit amet erat a mauris viverra egestas. Praesent efficitur odio sed orci iaculis accumsan. Sed quis quam suscipit, scelerisque velit porttitor, tristique enim. Pellentesque ac magna et metus venenatis pellentesque ullamcorper vitae felis. Vestibulum ut est mi. Ut at dignissim turpis. Pellentesque et magna non massa malesuada consectetur. Morbi in lorem nunc. Integer congue mi non sem consectetur suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus.

§ 2

Nam id consequat augue. Nunc sit amet nunc id ligula ornare porta quis id nisl. Vestibulum ultricies ex mauris, id viverra nibh congue vitae. Proin varius eget urna ut iaculis. Quisque molestie libero et nisi venenatis tincidunt. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec dapibus risus eu ipsum pharetra, vitae viverra nibh dictum. Nulla nec faucibus mauris, ac iaculis lacus. Integer eu sem odio. Quisque luctus nulla elementum, sollicitudin justo eget, ultricies odio. Aliquam viverra non sapien a tincidunt.

§ 3

Sed a aliquet nisi. Pellentesque placerat, turpis sit amet placerat eleifend, tellus turpis consectetur risus, ac scelerisque lectus purus eget turpis. Duis non nunc a lacus sagittis fringilla a quis purus. Ut scelerisque, dolor in pretium mollis, tellus sapien commodo turpis, sed faucibus ante magna et ex. Nunc nec lectus arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce egestas finibus erat a vehicula. Suspendisse sit amet sagittis sem. Etiam porttitor lobortis neque, non gravida nisi egestas sed. Vivamus dignissim lectus ut turpis ultricies, ac aliquam justo convallis.

§ 4

Nulla eu tempor diam, a ultrices orci. Aenean massa lectus, euismod non fringilla nec, sagittis ut nisl. Aliquam eleifend nulla blandit urna eleifend, a viverra orci sodales. In suscipit scelerisque lectus, a sagittis ex volutpat at. Maecenas quis tortor elementum ex vulputate bibendum. Sed rutrum sapien leo, a euismod lacus vehicula eget. Suspendisse sed metus eu arcu gravida vulputate sit amet iaculis lacus. Pellentesque bibendum neque quam, fringilla posuere ex efficitur eu. Pellentesque pellentesque tincidunt est eu molestie. Ut finibus sit amet nisi in finibus. Nulla et elit ipsum. Ut eros urna, vehicula vitae neque sed, hendrerit tempus nunc.

§ 5

Proin vitae faucibus ligula, vel blandit erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla viverra nulla a tristique egestas. Pellentesque vel tristique arcu, a consequat nunc. Etiam massa sem, lacinia id lacinia id, laoreet nec turpis. Fusce et ex bibendum, commodo ligula at, volutpat elit. Sed ac est dapibus, molestie odio sed, condimentum ante. Quisque pretium nulla nisi, nec sagittis est vehicula in. Proin malesuada ultrices quam, vel venenatis magna consectetur eu. Praesent consectetur orci ut ligula lacinia finibus.

Dynamic content (async loaded data)

§ 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc maximus facilisis lobortis. Sed non nisi mollis, hendrerit augue sed, facilisis leo. Aliquam dapibus malesuada quam quis luctus. Phasellus placerat mi vel aliquam ullamcorper. Sed sit amet erat a mauris viverra egestas. Praesent efficitur odio sed orci iaculis accumsan. Sed quis quam suscipit, scelerisque velit porttitor, tristique enim. Pellentesque ac magna et metus venenatis pellentesque ullamcorper vitae felis. Vestibulum ut est mi. Ut at dignissim turpis. Pellentesque et magna non massa malesuada consectetur. Morbi in lorem nunc. Integer congue mi non sem consectetur suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus.

§ 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc maximus facilisis lobortis. Sed non nisi mollis, hendrerit augue sed, facilisis leo. Aliquam dapibus malesuada quam quis luctus. Phasellus placerat mi vel aliquam ullamcorper. Sed sit amet erat a mauris viverra egestas. Praesent efficitur odio sed orci iaculis accumsan. Sed quis quam suscipit, scelerisque velit porttitor, tristique enim. Pellentesque ac magna et metus venenatis pellentesque ullamcorper vitae felis. Vestibulum ut est mi. Ut at dignissim turpis. Pellentesque et magna non massa malesuada consectetur. Morbi in lorem nunc. Integer congue mi non sem consectetur suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus.

§ 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc maximus facilisis lobortis. Sed non nisi mollis, hendrerit augue sed, facilisis leo. Aliquam dapibus malesuada quam quis luctus. Phasellus placerat mi vel aliquam ullamcorper. Sed sit amet erat a mauris viverra egestas. Praesent efficitur odio sed orci iaculis accumsan. Sed quis quam suscipit, scelerisque velit porttitor, tristique enim. Pellentesque ac magna et metus venenatis pellentesque ullamcorper vitae felis. Vestibulum ut est mi. Ut at dignissim turpis. Pellentesque et magna non massa malesuada consectetur. Morbi in lorem nunc. Integer congue mi non sem consectetur suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus.

§ 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc maximus facilisis lobortis. Sed non nisi mollis, hendrerit augue sed, facilisis leo. Aliquam dapibus malesuada quam quis luctus. Phasellus placerat mi vel aliquam ullamcorper. Sed sit amet erat a mauris viverra egestas. Praesent efficitur odio sed orci iaculis accumsan. Sed quis quam suscipit, scelerisque velit porttitor, tristique enim. Pellentesque ac magna et metus venenatis pellentesque ullamcorper vitae felis. Vestibulum ut est mi. Ut at dignissim turpis. Pellentesque et magna non massa malesuada consectetur. Morbi in lorem nunc. Integer congue mi non sem consectetur suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus.

§ 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc maximus facilisis lobortis. Sed non nisi mollis, hendrerit augue sed, facilisis leo. Aliquam dapibus malesuada quam quis luctus. Phasellus placerat mi vel aliquam ullamcorper. Sed sit amet erat a mauris viverra egestas. Praesent efficitur odio sed orci iaculis accumsan. Sed quis quam suscipit, scelerisque velit porttitor, tristique enim. Pellentesque ac magna et metus venenatis pellentesque ullamcorper vitae felis. Vestibulum ut est mi. Ut at dignissim turpis. Pellentesque et magna non massa malesuada consectetur. Morbi in lorem nunc. Integer congue mi non sem consectetur suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Custom navigation content

§ 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc maximus facilisis lobortis. Sed non nisi mollis, hendrerit augue sed, facilisis leo. Aliquam dapibus malesuada quam quis luctus. Phasellus placerat mi vel aliquam ullamcorper. Sed sit amet erat a mauris viverra egestas. Praesent efficitur odio sed orci iaculis accumsan. Sed quis quam suscipit, scelerisque velit porttitor, tristique enim. Pellentesque ac magna et metus venenatis pellentesque ullamcorper vitae felis. Vestibulum ut est mi. Ut at dignissim turpis. Pellentesque et magna non massa malesuada consectetur. Morbi in lorem nunc. Integer congue mi non sem consectetur suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus.

§ 2

Nam id consequat augue. Nunc sit amet nunc id ligula ornare porta quis id nisl. Vestibulum ultricies ex mauris, id viverra nibh congue vitae. Proin varius eget urna ut iaculis. Quisque molestie libero et nisi venenatis tincidunt. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec dapibus risus eu ipsum pharetra, vitae viverra nibh dictum. Nulla nec faucibus mauris, ac iaculis lacus. Integer eu sem odio. Quisque luctus nulla elementum, sollicitudin justo eget, ultricies odio. Aliquam viverra non sapien a tincidunt.

§ 3

Sed a aliquet nisi. Pellentesque placerat, turpis sit amet placerat eleifend, tellus turpis consectetur risus, ac scelerisque lectus purus eget turpis. Duis non nunc a lacus sagittis fringilla a quis purus. Ut scelerisque, dolor in pretium mollis, tellus sapien commodo turpis, sed faucibus ante magna et ex. Nunc nec lectus arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce egestas finibus erat a vehicula. Suspendisse sit amet sagittis sem. Etiam porttitor lobortis neque, non gravida nisi egestas sed. Vivamus dignissim lectus ut turpis ultricies, ac aliquam justo convallis.

§ 4

Nulla eu tempor diam, a ultrices orci. Aenean massa lectus, euismod non fringilla nec, sagittis ut nisl. Aliquam eleifend nulla blandit urna eleifend, a viverra orci sodales. In suscipit scelerisque lectus, a sagittis ex volutpat at. Maecenas quis tortor elementum ex vulputate bibendum. Sed rutrum sapien leo, a euismod lacus vehicula eget. Suspendisse sed metus eu arcu gravida vulputate sit amet iaculis lacus. Pellentesque bibendum neque quam, fringilla posuere ex efficitur eu. Pellentesque pellentesque tincidunt est eu molestie. Ut finibus sit amet nisi in finibus. Nulla et elit ipsum. Ut eros urna, vehicula vitae neque sed, hendrerit tempus nunc.

§ 5

Proin vitae faucibus ligula, vel blandit erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla viverra nulla a tristique egestas. Pellentesque vel tristique arcu, a consequat nunc. Etiam massa sem, lacinia id lacinia id, laoreet nec turpis. Fusce et ex bibendum, commodo ligula at, volutpat elit. Sed ac est dapibus, molestie odio sed, condimentum ante. Quisque pretium nulla nisi, nec sagittis est vehicula in. Proin malesuada ultrices quam, vel venenatis magna consectetur eu. Praesent consectetur orci ut ligula lacinia finibus.

API

Parameters

Name Type Description
TargetId string ID of the HxNav or list-group with scrollspy navigation.
CssClass string Scrollspy additional CSS class. Added to main div (.hx-scrollspy).
ChildContent RenderFragment Content to be spied. Elements with IDs are required (corresponding IDs to be used in HxNavLink.Href).

Methods

Method Returns Description
RefreshAsync() Task When using scrollspy in conjunction with adding or removing of elements from the DOM (e.g. asynchronnous data load), you’ll need to refresh the scrollspy explicitly.

HxScrollspyNavLink

Temporary (?) NavLink component to be used with HxScrollspy where #id anchors are required and page-route#id cannot be used.

API

Parameters

Name Type Description
Href string The navigation target in #id form.
AdditionalAttributes Dictionary<string, object> Additional attributes to be splatted onto an underlying <a> element.
ChildContent RenderFragment

Event Callbacks

Name Type Description
OnClick EventCallback<MouseEventArgs> Raised when the item is clicked (before the navigation location is changed to Href).
An unhandled error has occurred. Reload 🗙