You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+12-11Lines changed: 12 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,7 +11,7 @@
11
11
The [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) is a great API.
12
12
But it may not be the one-size-fits-all solution to highlight menu/sidebar links.
13
13
14
-
You may noticed that last targets, never intersect if entirely visible in the viewport. Clicking on their links highlights other links or does nothing. In addition to that, the URL hash may not reflect the active link.
14
+
You may noticed that last targets, may never intersect if entirely visible in the viewport. Clicking on their links highlights other links or does nothing. In addition to that, the URL hash may not reflect the active link.
15
15
16
16
But also, it's tricky to customize behavior according to different scroll interactions.
17
17
@@ -23,7 +23,7 @@ For example, you want to immediately highlight targets when scroll is originated
23
23
24
24
- Precise and stable at any speed
25
25
- CSS scroll-behavior and callback agnostic
26
-
- Adaptive behavior on mount, scroll, click, cancel.
26
+
- Adaptive behavior on mount (hash), scroll, click, cancel.
27
27
- Customizable boundary offsets for each direction
| setActive |`(id: string) => void`| Function to include in your click handlers to ensure proper behavior between any interaction which may trigger or alter highlighting. |
170
-
| isActive |`(id: string) => boolean`| Whether the given Id is active or not |
171
-
| activeId |`Ref<string>`| Id of the active target |
172
-
| activeIndex |`Ref<number>`| Index of the active target in offset order, `0` for the first target and so on. |
| setActive |`(id: string) => void`|:firecracker:Function to include in your click handler to ensure adaptive behavior between any futher scroll/cancel interaction. |
171
+
| isActive |`(id: string) => boolean`| Whether the given Id is active or not |
172
+
| activeId |`Ref<string>`| Id of the active target |
173
+
| activeIndex |`Ref<number>`| Index of the active target in offset order, `0` for the first target and so on. |
173
174
174
175
<br />
175
176
@@ -212,7 +213,7 @@ Feel free to create your own click handler and to choose the scrolling strategy:
0 commit comments