improve scroll cancel chrome-based browsers

Author: smastrom

.eslintignore

@@ -1,2 +1,4 @@
 demo
-tests
+tests
+content
+content-app

.gitignore

@@ -11,6 +11,7 @@ pnpm-debug.log*
 node_modules
 dist
 
+content
 content-app
 demo/dist
 *.tgz

src/useActive.ts

@@ -124,10 +124,6 @@ export function useActive(
 	function _setActive(prevY: number, { isCancel } = { isCancel: false }) {
 		const nextY = isWindow.value ? window.scrollY : (root.value as HTMLElement).scrollTop;
 
-		if (nextY === prevY) {
-			return;
-		}
-
 		if (nextY < prevY) {
 			onScrollUp();
 		} else {

src/useScroll.ts

@@ -1,5 +1,5 @@
 import { watch, onMounted, ref, computed, type Ref, type ComputedRef } from 'vue';
-import { isSSR, useMediaRef } from './utils';
+import { isChrome, isSSR, useMediaRef } from './utils';
 
 type UseListenersOptions = {
 	isWindow: ComputedRef<boolean>;
@@ -70,14 +70,15 @@ export function useScroll({ isWindow, root, _setActive, matchMedia }: UseListene
 		}
 	}
 
-	function resetReady() {
+	function waitForIdle() {
 		setReady(20);
 	}
 
 	function onPointerDown(event: PointerEvent) {
 		const isLink = (event.target as HTMLElement).tagName === 'A';
 		const hasLink = (event.target as HTMLElement).closest('a');
-		if (!isLink && !hasLink) {
+
+		if (!isChrome && !isLink && !hasLink) {
 			reScroll();
 			// ...and force set if canceling scroll
 			_setActive(clickY.value, { isCancel: true });
@@ -124,19 +125,19 @@ export function useScroll({ isWindow, root, _setActive, matchMedia }: UseListene
 			const rootEl = isWindow.value ? document : root.value;
 
 			if (_isClick && rootEl) {
-				rootEl.addEventListener('scroll', resetReady, ONCE);
+				rootEl.addEventListener('scroll', waitForIdle, ONCE);
 				rootEl.addEventListener('wheel', reScroll, ONCE);
+				rootEl.addEventListener('touchmove', reScroll, ONCE);
 				rootEl.addEventListener('keydown', onSpaceBar as EventListener, ONCE);
-				rootEl.addEventListener('touchmove', reScroll as EventListener, ONCE);
 				rootEl.addEventListener('pointerdown', onPointerDown as EventListener, ONCE);
 			}
 
 			onCleanup(() => {
 				if (_isClick && rootEl) {
-					rootEl.removeEventListener('scroll', resetReady);
+					rootEl.removeEventListener('scroll', waitForIdle);
 					rootEl.removeEventListener('wheel', reScroll);
+					rootEl.removeEventListener('touchmove', reScroll);
 					rootEl.removeEventListener('keydown', onSpaceBar as EventListener);
-					rootEl.removeEventListener('touchmove', reScroll as EventListener);
 					rootEl.removeEventListener('pointerdown', onPointerDown as EventListener);
 				}
 			});

src/utils.ts

@@ -5,6 +5,8 @@ export const isSSR = typeof window === 'undefined';
 export const FIXED_TO_TOP_OFFSET = 10;
 export const FIXED_OFFSET = 5;
 
+export const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+
 // When users set refs, if no media match, set default value
 export function useMediaRef<T>(matchMedia: Ref<boolean>, defaultValue: T): Ref<T> {
 	const _customRef = customRef<T>((track, trigger) => {