fix collision with native scroll-behavior

grifart · Jan 30, 2024 · 1c12698 · 1c12698
1 parent ea2d4c6
commit 1c12698
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 2 deletions.
diff --git a/src/scrollers/NativeScrollBehavior.ts b/src/scrollers/NativeScrollBehavior.ts
@@ -0,0 +1,37 @@
+type ScrollBehavior = 'auto' | 'smooth' | 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';
+
+class NativeScrollBehavior
+{
+	private originalValue: ScrollBehavior|null = null;
+
+	private constructor(
+		private readonly rootEl: HTMLHtmlElement,
+	) {}
+
+	public static forWindowObject(): NativeScrollBehavior
+	{
+		return new this(
+			document.documentElement as HTMLHtmlElement,
+		);
+	}
+
+
+	public remove(): void
+	{
+		this.originalValue = window.getComputedStyle(this.rootEl).getPropertyValue('scrollBehavior') as ScrollBehavior;
+		this.rootEl.style.scrollBehavior = 'unset';
+	}
+
+	public restore(): void
+	{
+		if (this.originalValue === null) {
+			return;
+		}
+
+		this.rootEl.style.scrollBehavior = this.originalValue;
+	}
+
+}
+
+// export singleton instance
+export const nativeScrollBehavior = NativeScrollBehavior.forWindowObject();
diff --git a/src/scrollers/scrollToElement.ts b/src/scrollers/scrollToElement.ts
@@ -1,11 +1,16 @@
 import * as Velocity from 'velocity-animate';
 import {EASE_IN_SKIP_OUT_EASING} from '../easing/bindEasingToVelocity';
+import {nativeScrollBehavior} from './NativeScrollBehavior';
 
 export function scrollToElement(element: HTMLElement, onScrollFinishedCallback?: () => void): void
 {
+	nativeScrollBehavior.remove();
 	Velocity.animate(element, 'scroll', {
 		duration: 1200, // todo: different depending on offset from page top?
 		easing: EASE_IN_SKIP_OUT_EASING,
-		complete: () => onScrollFinishedCallback !== undefined && onScrollFinishedCallback(),
+		complete: () => {
+			nativeScrollBehavior.restore();
+			onScrollFinishedCallback !== undefined && onScrollFinishedCallback();
+		},
 	});
 }
diff --git a/src/scrollers/scrollToOffset.ts b/src/scrollers/scrollToOffset.ts
@@ -1,11 +1,13 @@
 import * as Velocity from 'velocity-animate';
 import {EASE_IN_SKIP_OUT_EASING} from '../easing/bindEasingToVelocity';
+import {nativeScrollBehavior} from "./NativeScrollBehavior";
 
 export function scrollToOffset(
 	topOffset: number,
 	onScrollFinishedCallback?: () => void,
 ): void
 {
+	nativeScrollBehavior.remove();
 	/**
 	 * Setting `<html>` as the element to scroll to with offset simulates `window.scrollTo()` behavior.
 	 * See last paragraph at http://velocityjs.org/#scroll
@@ -14,6 +16,9 @@ export function scrollToOffset(
 		duration: 1200, // todo: different depending on offset from page top?
 		offset: topOffset,
 		easing: EASE_IN_SKIP_OUT_EASING,
-		complete: onScrollFinishedCallback,
+		complete: () => {
+			nativeScrollBehavior.restore();
+			onScrollFinishedCallback !== undefined && onScrollFinishedCallback();
+		},
 	});
 }