diff --git a/README.md b/README.md index 1a0c250..51ae1e2 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,6 @@ +# Forked +Vael's fork of svelte-scrollto-element, supporting Svelte 4 and bringing with it slight optimizations. + # svelte-scrollto-element > Animating vertical and horizontal scrolling (for Svelte) diff --git a/package.json b/package.json index 05e6420..061486c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "svelte-scrollto-element", - "version": "0.7.1", + "name": "@vaelvictus/svelte-scrollto-element", + "version": "0.7.2", "description": "Svelte action that listens for click events and scrolls to elements with animation. Inspired by rigor789/vue-scrollto.", "scripts": { "start": "tsc -w", diff --git a/src/services/service.ts b/src/services/service.ts index 054d25e..45ddbf0 100644 --- a/src/services/service.ts +++ b/src/services/service.ts @@ -17,7 +17,7 @@ const defaultOptions: ScrollToElementOptions = { }; const scrollToInternal = (options: ScrollToElementOptions): (() => void) => { - const { + let { duration, delay, easing, @@ -29,35 +29,27 @@ const scrollToInternal = (options: ScrollToElementOptions): (() => void) => { onDone, container, onAborting, - element + element, + offset } = options; - let { offset } = options; + offset = typeof offset === 'function' ? offset() : offset; - if (typeof offset === 'function') { - offset = offset() as Function; - } - - const cumulativeOffsetContainer = cumulativeOffset(container); - const cumulativeOffsetTarget = element ? cumulativeOffset(element) : { top: y, left: x }; - - const initialX = scrollLeft(container); - const initialY = scrollTop(container); + const { top: containerTop, left: containerLeft } = cumulativeOffset(container); + const { top: targetTop, left: targetLeft } = element ? cumulativeOffset(element) : { top: y, left: x }; - const targetX = cumulativeOffsetTarget.left - cumulativeOffsetContainer.left + (offset as number); - const targetY = cumulativeOffsetTarget.top - cumulativeOffsetContainer.top + (offset as number); - - const diffX = targetX - initialX; - const diffY = targetY - initialY; + const [initialX, initialY] = [scrollLeft(container), scrollTop(container)]; + const [targetX, targetY] = [targetLeft - containerLeft, targetTop - containerTop].map(t => t + offset); + const [diffX, diffY] = [targetX - initialX, targetY - initialY]; let scrolling = true; let started = false; const startTime = now() + delay; const endTime = startTime + duration; - function scrollToTopLeft(element: HTMLElement, top: number, left: number): void { - if (scrollX) scrollLeft(element, left); - if (scrollY) scrollTop(element, top); + function scrollToTopLeft(top: number, left: number): void { + if (scrollX) scrollLeft(container, left); + if (scrollY) scrollTop(container, top); } function start(delayStart: number | boolean): void { @@ -68,7 +60,7 @@ const scrollToInternal = (options: ScrollToElementOptions): (() => void) => { } function tick(progress: number): void { - scrollToTopLeft(container, initialY + diffY * progress, initialX + diffX * progress); + scrollToTopLeft(initialY + diffY * progress, initialX + diffX * progress); } function stop(): void { @@ -91,8 +83,7 @@ const scrollToInternal = (options: ScrollToElementOptions): (() => void) => { return false; } if (started) { - const p = now - startTime; - const t = 0 + 1 * easing(p / duration); + const t = easing((now - startTime) / duration); tick(t); } @@ -100,7 +91,6 @@ const scrollToInternal = (options: ScrollToElementOptions): (() => void) => { }); start(delay); - tick(0); return stop; @@ -139,27 +129,16 @@ const setGlobalOptions = (options: ScrollToElementOptions): void => { const scrollTo = (options: ScrollToElementOptions): (() => void) => scrollToInternal(proceedOptions(options)); -const scrollToBottom = (options?: ScrollToElementOptions): (() => void) => { +const scrollToY = (y: number, options?: ScrollToElementOptions): (() => void) => { options = proceedOptions(options); - - return scrollToInternal( - extend(options, { - element: null, - y: scrollContainerHeight(options.container) - }) - ); + return scrollToInternal(extend(options, { element: null, y })); }; -const scrollToTop = (options?: ScrollToElementOptions): (() => void) => { - options = proceedOptions(options); +const scrollToBottom = (options?: ScrollToElementOptions): (() => void) => + scrollToY(scrollContainerHeight(proceedOptions(options).container), options); - return scrollToInternal( - extend(options, { - element: null, - y: 0 - }) - ); -}; +const scrollToTop = (options?: ScrollToElementOptions): (() => void) => + scrollToY(0, options); const makeScrollToAction = (scrollToFunc: Function) => (node: Node, options: ScrollToElementOptions) => { @@ -187,4 +166,4 @@ export const scrolltotop = makeScrollToAction(scrollToTop); export const scrolltobottom = makeScrollToAction(scrollToBottom); // Methods -export const animateScroll = { scrollTo, scrollToTop, scrollToBottom, setGlobalOptions }; +export const animateScroll = { scrollTo, scrollToTop, scrollToBottom, setGlobalOptions }; \ No newline at end of file