Skip to content

Commit c0105ad

Browse files
committed
edit readme, remove anch condition
1 parent 7cc079d commit c0105ad

File tree

2 files changed

+16
-17
lines changed

2 files changed

+16
-17
lines changed

README.md

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
The [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) is a great API.
1212
But it may not be the one-size-fits-all solution to highlight menu/sidebar links.
1313

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.
1515

1616
But also, it's tricky to customize behavior according to different scroll interactions.
1717

@@ -23,7 +23,7 @@ For example, you want to immediately highlight targets when scroll is originated
2323

2424
- Precise and stable at any speed
2525
- CSS scroll-behavior and callback agnostic
26-
- Adaptive behavior on mount, scroll, click, cancel.
26+
- Adaptive behavior on mount (hash), scroll, click, cancel.
2727
- Customizable boundary offsets for each direction
2828
- Customizable behavior on top/bottom reached
2929
- Supports containers different than window
@@ -75,13 +75,14 @@ important).
7575
<!-- Sidebar.vue -->
7676
7777
<script setup>
78-
import { useActive } from 'vue-reactive-toc'
78+
import { useActive } from 'vue-use-active-scroll'
7979
80+
// Data used to render your links
8081
const links = ref([
8182
{ href: 'introduction', label: 'Introduction' },
8283
{ href: 'quick-start', label: 'Quick Start' },
8384
{ href: 'props', label: 'Props' }
84-
]) // Data used to render your links
85+
])
8586
8687
const targets = computed(() => links.map(({ href }) => href))
8788
// console.log(targets.value) => ['introduction', 'quick-start', 'props']
@@ -164,12 +165,12 @@ const { isActive, setActive } = useActive(targets, {
164165

165166
### Return object
166167

167-
| Name | Type | Description |
168-
| ----------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
169-
| 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. |
168+
| Name | Type | Description |
169+
| ----------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
170+
| 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. |
173174

174175
<br />
175176

@@ -212,7 +213,7 @@ Feel free to create your own click handler and to choose the scrolling strategy:
212213

213214
```vue
214215
<script setup>
215-
import { useActive } from 'vue-active-target'
216+
import { useActive } from 'vue-use-active-scroll'
216217
import animateScrollTo from 'animated-scroll-to'
217218
218219
// ...

src/useScroll.ts

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -84,10 +84,8 @@ export function useScroll({
8484
isClick.value = false;
8585
}
8686

87-
function onPointerDown(event: PointerEvent) {
88-
const isLink = (event.target as HTMLElement).tagName === 'A';
89-
90-
if (!isLink && isFirefox()) {
87+
function onPointerDown() {
88+
if (isFirefox()) {
9189
reScroll();
9290
// ...and force set if canceling scroll
9391
setActive({ prevY: clickY.value, isCancel: true });
@@ -140,7 +138,7 @@ export function useScroll({
140138
rootEl.addEventListener('touchmove', reScroll, ONCE);
141139
rootEl.addEventListener('scroll', setIdle as unknown as EventListener, ONCE);
142140
rootEl.addEventListener('keydown', onSpaceBar as EventListener, ONCE);
143-
rootEl.addEventListener('pointerdown', onPointerDown as EventListener, ONCE);
141+
rootEl.addEventListener('pointerdown', onPointerDown, ONCE);
144142
}
145143

146144
onCleanup(() => {
@@ -149,7 +147,7 @@ export function useScroll({
149147
rootEl.removeEventListener('touchmove', reScroll);
150148
rootEl.removeEventListener('scroll', setIdle as unknown as EventListener);
151149
rootEl.removeEventListener('keydown', onSpaceBar as EventListener);
152-
rootEl.removeEventListener('pointerdown', onPointerDown as EventListener);
150+
rootEl.removeEventListener('pointerdown', onPointerDown);
153151
}
154152
});
155153
},

0 commit comments

Comments
 (0)