HxScrollspy #
Bootstrap Scrollspy component.
How it works #
Scrollspy needs two components to work together. The HxScrollspy component wraps
the area to spy on, and the HxNav or a list-group (with HxScrollspyNavLinks) represent the navigation.
These components need to be associated using the HxScrollspy.TargetId parameter.
For more details, see the Bootstrap documentation.
The scrollspy navigation has to use a custom HxScrollspyNavLink to work around the <base> Blazor requirement and the inability of Bootstrap to interpret the page#fragment form of link.
For anchor-fragment navigation (<a href="#id">) to work in net7.0 and earlier, the page has to host the HxAnchorFragmentNavigation component.
<div> or HxOffcanvas).For full-page scrollspy, the spying has to be attached directly to
<body> (will be implemented later as needed?).
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) #
Bootstrap scrollspy calculates offsets of individual sections when activated (i.e. OnAfterRenderAsync within first render). If the content changes dynamically,
you have to refresh the offsets manually by calling HxScrollspy.RefreshAsync().
A similar issue applies for fragment-navigation. You have to postpone the initial fragment navigation to happen after the data gets loaded and the UI renders the final version
(by setting <HxAnchorFragmentNavigation Automation="HxAnchorFragmentNavigation.SamePage">
and calling HxAnchorFragmentNavigation.ScrollToCurrentUriFragmentAsync()).
Consider using placeholders to fix the UI layout while loading.
§ 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 #
HxButton inside HxScrollspyNavLink, be sure to set OnClickStopPropagation = "true".
If you don't, the application will navigate to /#anchor of the HxScrollspyNavLink after the OnClick handler completes.
§ 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 |
|---|---|---|
| TargetIdREQUIRED | string |
ID of the HxNav or list-group with scrollspy navigation. |
| ChildContent | RenderFragment |
Content to be spied on. Elements with IDs are required (corresponding IDs to be used in HxNavLink.Href). |
| CssClass | string |
Scrollspy additional CSS class. Added to the main div (.hx-scrollspy). |
Methods #
| Method | Returns | Description |
|---|---|---|
| RefreshAsync() | Task |
When using scrollspy in conjunction with adding or removing elements from the DOM (e.g. asynchronous 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 |
|---|---|---|
| HrefREQUIRED | string |
The navigation target in #id form. |
| AdditionalAttributes | Dictionary<string, object> |
Additional attributes to be splatted onto an underlying <a> element. |
| ChildContent | RenderFragment |
Content of the component. |
| CssClass | string |
Additional CSS class. |
Event callbacks #
| Name | Type | Description |
|---|---|---|
| OnClick | EventCallback<MouseEventArgs> |
Raised when the item is clicked (before the navigation location is changed to Href). |