diff --git a/src/scrollers/NativeScrollBehavior.ts b/src/scrollers/NativeScrollBehavior.ts new file mode 100644 index 0000000..d389326 --- /dev/null +++ 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 index 0d7f21c..9aac46a 100644 --- 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 index ade7c3a..5aa7f48 100644 --- 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 `` 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(); + }, }); }