use-scroller 1.1.0 → 1.2.0

package/dist/cjs/utils.js

@@ -1,42 +1,44 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getEasing = exports.easingMap = exports.getElement = exports.validateElement = exports.resolveScrollValues = exports.defaultScrollOptions = exports.isServer = void 0;
+// Check if the code is running on the server-side.
 exports.isServer = typeof window === 'undefined' || typeof document === 'undefined';
+// Default scroll options used if no options are provided.
 exports.defaultScrollOptions = {
     direction: 'vertical',
     duration: 300,
     easingOption: 'ease-in-out',
 };
 /**
- * Resolves scroll values based on the type of param.
- * @param {HTMLElement | Window} element
+ * Resolves scroll values based on the type of element.
+ * @param {HTMLElement | Window} element - The element to retrieve scroll values from.
+ * @returns {object} - An object containing scroll-related properties.
  */
 var resolveScrollValues = function (element) {
-    if (element === document.body ||
-        element === document.documentElement ||
-        element instanceof Window) {
-        return {
-            scrollLeft: document.body.scrollLeft || document.documentElement.scrollLeft,
-            scrollTop: document.body.scrollTop || document.documentElement.scrollTop,
-            scrollWidth: document.body.scrollWidth || document.documentElement.scrollWidth,
-            clientWidth: document.body.clientWidth || document.documentElement.clientWidth,
-            clientHeight: document.body.clientHeight || document.documentElement.clientHeight,
-            scrollHeight: document.body.scrollHeight || document.documentElement.scrollHeight,
-        };
-    }
+    var isWindow = element instanceof Window;
+    var docElement = document.documentElement;
+    var docBody = document.body;
+    var scrollLeftMax = isWindow
+        ? Math.max(docBody.scrollLeft, docElement.scrollLeft)
+        : element.scrollWidth - element.clientWidth;
+    var scrollTopMax = isWindow
+        ? Math.max(docBody.scrollTop, docElement.scrollTop)
+        : element.scrollHeight - element.clientHeight;
     return {
-        scrollLeft: element.scrollLeft,
-        scrollTop: element.scrollTop,
-        scrollWidth: element.scrollWidth,
-        clientWidth: element.clientWidth,
-        clientHeight: element.clientHeight,
-        scrollHeight: element.scrollHeight,
+        scrollLeft: isWindow ? docBody.scrollLeft || docElement.scrollLeft : element.scrollLeft,
+        scrollTop: isWindow ? docBody.scrollTop || docElement.scrollTop : element.scrollTop,
+        scrollWidth: isWindow ? docBody.scrollWidth || docElement.scrollWidth : element.scrollWidth,
+        clientWidth: isWindow ? docBody.clientWidth || docElement.clientWidth : element.clientWidth,
+        clientHeight: isWindow ? docBody.clientHeight || docElement.clientHeight : element.clientHeight,
+        scrollHeight: isWindow ? docBody.scrollHeight || docElement.scrollHeight : element.scrollHeight,
+        scrollLeftMax: scrollLeftMax,
+        scrollTopMax: scrollTopMax,
     };
 };
 exports.resolveScrollValues = resolveScrollValues;
 /**
- * Validate if element passed to the function is valid.
- * @param {HTMLElement | Window} element
+ * Validate if the element passed to the function is valid.
+ * @param {HTMLElement | Window} element - The element to validate.
  */
 function validateElement(element) {
     if (element === undefined) {
@@ -47,6 +49,11 @@ function validateElement(element) {
     }
 }
 exports.validateElement = validateElement;
+/**
+ * Get the DOM element from a React ref object.
+ * @param {RefObject<HTMLElement>} ref - The React ref object.
+ * @returns {HTMLElement} - The DOM element.
+ */
 var getElement = function (ref) {
     if (!ref.current) {
         throw new Error("Could not resolve ref object: ".concat(ref.current));
@@ -54,6 +61,7 @@ var getElement = function (ref) {
     return ref.current;
 };
 exports.getElement = getElement;
+// Map of easing functions for scroll animations.
 exports.easingMap = {
     linear: function (t) {
         return t;
@@ -68,6 +76,11 @@ exports.easingMap = {
         return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
     },
 };
+/**
+ * Get an easing function based on the provided easing option or the default option.
+ * @param {EasingOptions} easing - The easing option.
+ * @returns {EasingFunction} - The easing function.
+ */
 var getEasing = function (easing) {
     var easeFunc = exports.easingMap[easing || exports.defaultScrollOptions.easingOption];
     if (!easeFunc) {

package/dist/esm/hooks/use-scroll.d.ts

@@ -10,11 +10,15 @@ export declare function useScroll<T extends HTMLElement>(props?: Partial<ScrollO
         isScrolledRight: boolean;
         isScrolledTop: boolean;
         isScrolledBottom: boolean;
+        maxScrollLeft: number;
+        maxScrollTop: number;
+        scrollPercentageX: number;
+        scrollPercentageY: number;
     };
-    scrollLeft: (offset?: number) => void;
-    scrollRight: (offset?: number) => void;
-    scrollBottom: (offset?: number) => void;
-    scrollTop: (offset?: number) => void;
-    scrollCenter: () => void;
-    scroll: (from: number, to: number) => void;
+    scrollLeft: ((offset?: number | undefined) => void) | undefined;
+    scrollRight: ((offset?: number | undefined) => void) | undefined;
+    scrollBottom: ((offset?: number | undefined) => void) | undefined;
+    scrollTop: ((offset?: number | undefined) => void) | undefined;
+    scrollCenter: (() => void) | undefined;
+    scrollTo: ((to: number) => void) | undefined;
 };

package/dist/esm/hooks/use-scroll.js

@@ -9,78 +9,68 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { useCallback, useRef, useState } from 'react';
-import { scroller } from '../scroller';
+import { useRef, useState } from 'react';
+import { createScroller } from '../scroller';
 import { defaultScrollOptions, getElement } from '../utils';
 import { useIsoMorphicEffect } from './use-iso-morphic-effect';
+var initialState = {
+    left: 0,
+    top: 0,
+    isScrollable: false,
+    isScrolledLeft: true,
+    isScrolledRight: false,
+    isScrolledTop: true,
+    isScrolledBottom: false,
+    maxScrollLeft: 0,
+    maxScrollTop: 0,
+    scrollPercentageX: 0,
+    scrollPercentageY: 0, // Percentage of vertical scroll covered
+};
 export function useScroll(props) {
+    var _a, _b, _c, _d, _e, _f;
     var ref = useRef(null);
-    var _a = useState(function () { return ({
-        left: 0,
-        top: 0,
-        isScrollable: false,
-        isScrolledLeft: false,
-        isScrolledRight: false,
-        isScrolledTop: false,
-        isScrolledBottom: false,
-    }); }), state = _a[0], setState = _a[1];
     var scrollOpt = __assign(__assign({}, defaultScrollOptions), props);
-    var scroll = useCallback(function (from, to) {
-        var container = getElement(ref);
-        var scrollContainer = scroller({ container: container, options: scrollOpt });
-        scrollContainer.scrollTo(from, to);
-    }, []);
-    var scrollCenter = useCallback(function () {
-        var container = getElement(ref);
-        var scrollContainer = scroller({ container: container, options: scrollOpt });
-        scrollContainer.scrollToCenter();
-    }, []);
-    var scrollTop = useCallback(function (offset) {
-        var container = getElement(ref);
-        var scrollContainer = scroller({ container: container, options: scrollOpt });
-        scrollContainer.scrollToTop(offset);
-    }, []);
-    var scrollBottom = useCallback(function (offset) {
-        var container = getElement(ref);
-        var scrollContainer = scroller({ container: container, options: scrollOpt });
-        scrollContainer.scrollToBottom(offset);
-    }, []);
-    var scrollRight = useCallback(function (offset) {
-        var container = getElement(ref);
-        var scrollContainer = scroller({ container: container, options: scrollOpt });
-        scrollContainer.scrollToRight(offset);
-    }, []);
-    var scrollLeft = useCallback(function (offset) {
-        var container = getElement(ref);
-        var scrollContainer = scroller({ container: container, options: scrollOpt });
-        scrollContainer.scrollToLeft(offset);
-    }, []);
+    var scrollerRef = useRef(null);
+    var _g = useState(function () { return initialState; }), state = _g[0], setState = _g[1];
     useIsoMorphicEffect(function () {
         var scrollContainer = ref.current;
         if (!scrollContainer)
             return;
+        // Create the scroller instance only once inside the effect
+        if (!scrollerRef.current) {
+            var container = getElement(ref);
+            scrollerRef.current = createScroller(container, scrollOpt);
+        }
         var scrollWidth = scrollContainer.scrollWidth, clientWidth = scrollContainer.clientWidth, clientHeight = scrollContainer.clientHeight, scrollHeight = scrollContainer.scrollHeight;
         var isScrollable = clientWidth !== scrollWidth || clientHeight !== scrollHeight;
         setState(function (prev) { return (__assign(__assign({}, prev), { isScrollable: isScrollable })); });
         var handleScroll = function () {
             if (scrollContainer) {
-                var scrollLeft_1 = scrollContainer.scrollLeft, scrollTop_1 = scrollContainer.scrollTop;
-                var scrollState = __assign(__assign({}, state), { isScrolledLeft: scrollLeft_1 === 0, isScrolledRight: scrollLeft_1 >= scrollWidth - clientWidth, isScrolledTop: scrollTop_1 === 0, isScrolledBottom: scrollTop_1 >= scrollHeight - clientHeight, left: scrollLeft_1, top: scrollTop_1 });
+                var scrollLeft = scrollContainer.scrollLeft, scrollTop = scrollContainer.scrollTop;
+                var isAtLeftBoundary = scrollLeft === 0;
+                var isAtRightBoundary = scrollLeft >= scrollWidth - clientWidth;
+                var isAtTopBoundary = scrollTop === 0;
+                var isAtBottomBoundary = scrollTop >= scrollHeight - clientHeight;
+                var scrollState = __assign(__assign({}, state), { isScrolledLeft: isAtLeftBoundary, isScrolledRight: isAtRightBoundary, isScrolledTop: isAtTopBoundary, isScrolledBottom: isAtBottomBoundary, left: scrollLeft, top: scrollTop, maxScrollLeft: scrollWidth - clientWidth, maxScrollTop: scrollHeight - clientHeight, scrollPercentageX: isAtLeftBoundary
+                        ? 0
+                        : (scrollLeft / (scrollWidth - clientWidth)) * 100, scrollPercentageY: isAtTopBoundary
+                        ? 0
+                        : (scrollTop / (scrollHeight - clientHeight)) * 100 });
                 setState(scrollState);
             }
         };
         handleScroll();
         scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.addEventListener('scroll', handleScroll);
         return function () { return scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.removeEventListener('scroll', handleScroll); };
-    }, []);
+    }, [state]);
     return {
         ref: ref,
         state: state,
-        scrollLeft: scrollLeft,
-        scrollRight: scrollRight,
-        scrollBottom: scrollBottom,
-        scrollTop: scrollTop,
-        scrollCenter: scrollCenter,
-        scroll: scroll,
+        scrollLeft: (_a = scrollerRef.current) === null || _a === void 0 ? void 0 : _a.scrollToLeft,
+        scrollRight: (_b = scrollerRef.current) === null || _b === void 0 ? void 0 : _b.scrollToRight,
+        scrollBottom: (_c = scrollerRef.current) === null || _c === void 0 ? void 0 : _c.scrollToBottom,
+        scrollTop: (_d = scrollerRef.current) === null || _d === void 0 ? void 0 : _d.scrollToTop,
+        scrollCenter: (_e = scrollerRef.current) === null || _e === void 0 ? void 0 : _e.scrollToCenter,
+        scrollTo: (_f = scrollerRef.current) === null || _f === void 0 ? void 0 : _f.scrollTo,
     };
 }

package/dist/esm/hooks/use-window-scroll.d.ts

@@ -9,5 +9,5 @@ export declare function useWindowScroll(props?: Partial<Omit<ScrollOptions, 'dir
     scrollTop: (offset?: number | undefined) => void;
     scrollBottom: (offset?: number | undefined) => void;
     scrollToTarget: (currentTarget: HTMLElement) => void;
-    scroll: (from: number, to: number) => void;
+    scrollTo: (position: number) => void;
 };

package/dist/esm/hooks/use-window-scroll.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { useCallback, useState } from 'react';
-import { scroller } from '../scroller';
+import { createScroller } from '../scroller';
 import { useIsoMorphicEffect } from './use-iso-morphic-effect';
 import { defaultScrollOptions, resolveScrollValues } from '../utils';
 export function useWindowScroll(props) {
@@ -20,37 +20,39 @@ export function useWindowScroll(props) {
         isScrolledTop: false,
         isScrolledBottom: false,
     }); }), state = _a[0], setState = _a[1];
-    var scrollArgs = {
-        container: window,
-        options: __assign(__assign({}, defaultScrollOptions), props),
-    };
-    var scroll = useCallback(function (from, to) {
-        var scrollContainer = scroller(scrollArgs);
-        scrollContainer.scrollTo(from, to);
-    }, []);
+    var container = window;
+    var scrollOptions = __assign(__assign({}, defaultScrollOptions), props);
+    var scrollContainer = createScroller(container, scrollOptions);
+    var handleScroll = useCallback(function () {
+        var _a = resolveScrollValues(container), scrollLeft = _a.scrollLeft, scrollTop = _a.scrollTop, clientHeight = _a.clientHeight, scrollHeight = _a.scrollHeight;
+        var isAtTopBoundary = scrollTop === 0;
+        var isAtBottomBoundary = scrollTop >= scrollHeight - clientHeight;
+        var scrollState = {
+            left: scrollLeft,
+            top: scrollTop,
+            isScrolledTop: isAtTopBoundary,
+            isScrolledBottom: isAtBottomBoundary,
+        };
+        setState(scrollState);
+    }, [container]);
+    useIsoMorphicEffect(function () {
+        handleScroll();
+        container.addEventListener('scroll', handleScroll);
+        return function () {
+            container.removeEventListener('scroll', handleScroll);
+        };
+    }, [handleScroll]);
+    var scrollTo = useCallback(function (position) {
+        scrollContainer.scrollTo(position);
+    }, [scrollContainer]);
     var scrollToTarget = useCallback(function (currentTarget) {
-        var scrollContainer = scroller(scrollArgs);
         scrollContainer.scrollToTarget(currentTarget);
-    }, []);
+    }, [scrollContainer]);
     var scrollTop = useCallback(function (offset) {
-        var scrollContainer = scroller(scrollArgs);
         scrollContainer.scrollToTop(offset);
-    }, []);
+    }, [scrollContainer]);
     var scrollBottom = useCallback(function (offset) {
-        var scrollContainer = scroller(scrollArgs);
         scrollContainer.scrollToBottom(offset);
-    }, []);
-    useIsoMorphicEffect(function () {
-        var handleScroll = function () {
-            if (window) {
-                var _a = resolveScrollValues(window), scrollLeft = _a.scrollLeft, scrollTop_1 = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
-                var scrollState = __assign(__assign({}, state), { isScrolledTop: scrollTop_1 === 0, isScrolledBottom: scrollTop_1 >= scrollHeight - clientHeight, left: scrollLeft, top: scrollTop_1 });
-                setState(scrollState);
-            }
-        };
-        handleScroll();
-        window === null || window === void 0 ? void 0 : window.addEventListener('scroll', handleScroll);
-        return function () { return window === null || window === void 0 ? void 0 : window.removeEventListener('scroll', handleScroll); };
-    }, []);
-    return { state: state, scrollTop: scrollTop, scrollBottom: scrollBottom, scrollToTarget: scrollToTarget, scroll: scroll };
+    }, [scrollContainer]);
+    return { state: state, scrollTop: scrollTop, scrollBottom: scrollBottom, scrollToTarget: scrollToTarget, scrollTo: scrollTo };
 }

package/dist/esm/scroller.d.ts

@@ -1,10 +1,10 @@
-import { ScrollerProps } from './types';
-export declare function scroller({ container, options }: ScrollerProps): {
+import { ScrollOptions } from './types';
+export declare function createScroller(container: HTMLElement | Window, options?: ScrollOptions): {
+    scrollTo: (to: number) => void;
+    scrollToCenter: () => void;
+    scrollToTarget: (target: HTMLElement, offset?: number) => void;
     scrollToLeft: (offset?: number) => void;
     scrollToRight: (offset?: number) => void;
     scrollToTop: (offset?: number) => void;
     scrollToBottom: (offset?: number) => void;
-    scrollToTarget: (target: HTMLElement) => void;
-    scrollToCenter: () => void;
-    scrollTo: (from: number, to: number, layout?: 'horizontal' | 'vertical') => void;
 };

package/dist/esm/scroller.js

@@ -1,39 +1,43 @@
 import { defaultScrollOptions, getEasing, resolveScrollValues, validateElement } from './utils';
-export function scroller(_a) {
-    var container = _a.container, _b = _a.options, options = _b === void 0 ? defaultScrollOptions : _b;
+export function createScroller(container, options) {
+    if (options === void 0) { options = defaultScrollOptions; }
     validateElement(container);
     var duration = options.duration, easingOption = options.easingOption, direction = options.direction;
-    var _c = resolveScrollValues(container), scrollLeft = _c.scrollLeft, scrollTop = _c.scrollTop, clientWidth = _c.clientWidth, clientHeight = _c.clientHeight, scrollWidth = _c.scrollWidth, scrollHeight = _c.scrollHeight;
-    /**
-     * Scroll the Element or Window to the given
-     * position.
-     *
-     * @param {number} from the current scroll position.
-     * @param {number} to the new position to scroll.
-     * @param {string} layout the scroll direction.
-     */
-    function scrollTo(from, to, layout) {
+    var _a = resolveScrollValues(container), scrollLeft = _a.scrollLeft, scrollTop = _a.scrollTop, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight, scrollWidth = _a.scrollWidth, scrollHeight = _a.scrollHeight;
+    function scroll(from, to, layout) {
         if (layout === void 0) { layout = direction; }
         var startTime = null;
         var requestId = 0;
-        function loop(currentTime) {
-            if (!startTime)
-                startTime = currentTime;
-            var time = Math.min((currentTime - startTime) / duration, 1);
+        var distance = Math.abs(to - from);
+        function calculateCurrentPosition(timeFraction) {
             var easingFunc = getEasing(easingOption);
-            var currentPositionInTime = easingFunc(time) * (to - from) + from;
+            return easingFunc(timeFraction) * distance + from;
+        }
+        function updateScrollPosition(currentPosition) {
             container.scrollTo({
-                left: layout === 'horizontal' ? currentPositionInTime : undefined,
-                top: layout === 'vertical' ? currentPositionInTime : undefined,
+                left: layout === 'horizontal' ? currentPosition : undefined,
+                top: layout === 'vertical' ? currentPosition : undefined,
             });
-            if (time < 1) {
-                requestId = requestAnimationFrame(loop);
+        }
+        function animateScroll(currentTime) {
+            if (!startTime)
+                startTime = currentTime;
+            var elapsedTime = currentTime - startTime;
+            var timeFraction = elapsedTime / duration;
+            var currentPosition = calculateCurrentPosition(timeFraction);
+            updateScrollPosition(currentPosition);
+            if (timeFraction < 1) {
+                requestId = requestAnimationFrame(animateScroll);
             }
             else {
                 cancelAnimationFrame(requestId);
             }
         }
-        requestId = requestAnimationFrame(loop);
+        requestId = requestAnimationFrame(animateScroll);
+    }
+    function scrollTo(to) {
+        var from = direction === 'vertical' ? scrollTop : scrollLeft;
+        scroll(from, to);
     }
     function scrollToCenter() {
         var from = 0;
@@ -48,46 +52,39 @@ export function scroller(_a) {
             from = scrollLeft;
             to = scrollXCenterPosition;
         }
-        scrollTo(from, to, direction);
+        scroll(from, to, direction);
     }
-    function scrollToTarget(target) {
+    function scrollToTarget(target, offset) {
+        if (offset === void 0) { offset = 0; }
         validateElement(target);
         var offsetTop = target.offsetTop, offsetLeft = target.offsetLeft;
         var from = 0;
         var to = 0;
         if (direction === 'vertical') {
             from = scrollTop;
-            to = offsetTop;
+            to = offsetTop - offset;
         }
         if (direction === 'horizontal') {
             from = scrollLeft;
-            to = offsetLeft;
+            to = offsetLeft - offset;
         }
-        scrollTo(from, to, direction);
+        scroll(from, to, direction);
     }
-    var scrollToLeft = function (offset) {
-        var scrollPosition = offset || scrollLeft - clientWidth;
-        scrollTo(scrollLeft, scrollPosition, 'horizontal');
-    };
-    var scrollToRight = function (offset) {
-        var scrollPosition = offset || scrollLeft + clientWidth;
-        scrollTo(scrollLeft, scrollPosition, 'horizontal');
-    };
-    var scrollToTop = function (offset) {
-        var scrollPosition = offset || scrollTop - clientHeight;
-        scrollTo(scrollTop, scrollPosition, 'vertical');
-    };
-    var scrollToBottom = function (offset) {
-        var scrollPosition = offset || scrollTop + clientHeight;
-        scrollTo(scrollTop, scrollPosition, 'vertical');
-    };
     return {
-        scrollToLeft: scrollToLeft,
-        scrollToRight: scrollToRight,
-        scrollToTop: scrollToTop,
-        scrollToBottom: scrollToBottom,
-        scrollToTarget: scrollToTarget,
-        scrollToCenter: scrollToCenter,
         scrollTo: scrollTo,
+        scrollToCenter: scrollToCenter,
+        scrollToTarget: scrollToTarget,
+        scrollToLeft: function (offset) {
+            scroll(scrollLeft, offset || scrollLeft - clientWidth, 'horizontal');
+        },
+        scrollToRight: function (offset) {
+            scroll(scrollLeft, offset || scrollLeft + clientWidth, 'horizontal');
+        },
+        scrollToTop: function (offset) {
+            scroll(scrollTop, offset || scrollTop - clientHeight, 'vertical');
+        },
+        scrollToBottom: function (offset) {
+            scroll(scrollTop, offset || scrollTop + clientHeight, 'vertical');
+        },
     };
 }

package/dist/esm/utils.d.ts

@@ -3,8 +3,9 @@ import { EasingFunction, EasingFunctions, EasingOptions, ScrollOptions } from '.
 export declare const isServer: boolean;
 export declare const defaultScrollOptions: ScrollOptions;
 /**
- * Resolves scroll values based on the type of param.
- * @param {HTMLElement | Window} element
+ * Resolves scroll values based on the type of element.
+ * @param {HTMLElement | Window} element - The element to retrieve scroll values from.
+ * @returns {object} - An object containing scroll-related properties.
  */
 export declare const resolveScrollValues: (element: HTMLElement | Window) => {
     scrollLeft: number;
@@ -13,12 +14,24 @@ export declare const resolveScrollValues: (element: HTMLElement | Window) => {
     clientWidth: number;
     clientHeight: number;
     scrollHeight: number;
+    scrollLeftMax: number;
+    scrollTopMax: number;
 };
 /**
- * Validate if element passed to the function is valid.
- * @param {HTMLElement | Window} element
+ * Validate if the element passed to the function is valid.
+ * @param {HTMLElement | Window} element - The element to validate.
  */
 export declare function validateElement(element?: HTMLElement | Window): void;
+/**
+ * Get the DOM element from a React ref object.
+ * @param {RefObject<HTMLElement>} ref - The React ref object.
+ * @returns {HTMLElement} - The DOM element.
+ */
 export declare const getElement: (ref: RefObject<HTMLElement>) => HTMLElement;
 export declare const easingMap: EasingFunctions;
+/**
+ * Get an easing function based on the provided easing option or the default option.
+ * @param {EasingOptions} easing - The easing option.
+ * @returns {EasingFunction} - The easing function.
+ */
 export declare const getEasing: (easing?: EasingOptions) => EasingFunction;

package/dist/esm/utils.js

@@ -1,38 +1,40 @@
+// Check if the code is running on the server-side.
 export var isServer = typeof window === 'undefined' || typeof document === 'undefined';
+// Default scroll options used if no options are provided.
 export var defaultScrollOptions = {
     direction: 'vertical',
     duration: 300,
     easingOption: 'ease-in-out',
 };
 /**
- * Resolves scroll values based on the type of param.
- * @param {HTMLElement | Window} element
+ * Resolves scroll values based on the type of element.
+ * @param {HTMLElement | Window} element - The element to retrieve scroll values from.
+ * @returns {object} - An object containing scroll-related properties.
  */
 export var resolveScrollValues = function (element) {
-    if (element === document.body ||
-        element === document.documentElement ||
-        element instanceof Window) {
-        return {
-            scrollLeft: document.body.scrollLeft || document.documentElement.scrollLeft,
-            scrollTop: document.body.scrollTop || document.documentElement.scrollTop,
-            scrollWidth: document.body.scrollWidth || document.documentElement.scrollWidth,
-            clientWidth: document.body.clientWidth || document.documentElement.clientWidth,
-            clientHeight: document.body.clientHeight || document.documentElement.clientHeight,
-            scrollHeight: document.body.scrollHeight || document.documentElement.scrollHeight,
-        };
-    }
+    var isWindow = element instanceof Window;
+    var docElement = document.documentElement;
+    var docBody = document.body;
+    var scrollLeftMax = isWindow
+        ? Math.max(docBody.scrollLeft, docElement.scrollLeft)
+        : element.scrollWidth - element.clientWidth;
+    var scrollTopMax = isWindow
+        ? Math.max(docBody.scrollTop, docElement.scrollTop)
+        : element.scrollHeight - element.clientHeight;
     return {
-        scrollLeft: element.scrollLeft,
-        scrollTop: element.scrollTop,
-        scrollWidth: element.scrollWidth,
-        clientWidth: element.clientWidth,
-        clientHeight: element.clientHeight,
-        scrollHeight: element.scrollHeight,
+        scrollLeft: isWindow ? docBody.scrollLeft || docElement.scrollLeft : element.scrollLeft,
+        scrollTop: isWindow ? docBody.scrollTop || docElement.scrollTop : element.scrollTop,
+        scrollWidth: isWindow ? docBody.scrollWidth || docElement.scrollWidth : element.scrollWidth,
+        clientWidth: isWindow ? docBody.clientWidth || docElement.clientWidth : element.clientWidth,
+        clientHeight: isWindow ? docBody.clientHeight || docElement.clientHeight : element.clientHeight,
+        scrollHeight: isWindow ? docBody.scrollHeight || docElement.scrollHeight : element.scrollHeight,
+        scrollLeftMax: scrollLeftMax,
+        scrollTopMax: scrollTopMax,
     };
 };
 /**
- * Validate if element passed to the function is valid.
- * @param {HTMLElement | Window} element
+ * Validate if the element passed to the function is valid.
+ * @param {HTMLElement | Window} element - The element to validate.
  */
 export function validateElement(element) {
     if (element === undefined) {
@@ -42,12 +44,18 @@ export function validateElement(element) {
         throw new TypeError("\n      The element passed to scroller() must be a valid element. \n      You passed ".concat(element, ".\n      "));
     }
 }
+/**
+ * Get the DOM element from a React ref object.
+ * @param {RefObject<HTMLElement>} ref - The React ref object.
+ * @returns {HTMLElement} - The DOM element.
+ */
 export var getElement = function (ref) {
     if (!ref.current) {
         throw new Error("Could not resolve ref object: ".concat(ref.current));
     }
     return ref.current;
 };
+// Map of easing functions for scroll animations.
 export var easingMap = {
     linear: function (t) {
         return t;
@@ -62,6 +70,11 @@ export var easingMap = {
         return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
     },
 };
+/**
+ * Get an easing function based on the provided easing option or the default option.
+ * @param {EasingOptions} easing - The easing option.
+ * @returns {EasingFunction} - The easing function.
+ */
 export var getEasing = function (easing) {
     var easeFunc = easingMap[easing || defaultScrollOptions.easingOption];
     if (!easeFunc) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-scroller",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "author": "silvi lila",
   "license": "MIT",
   "main": "./dist/cjs/index.js",
@@ -27,8 +27,7 @@
     "clean": "rm -rf ./dist",
     "test": "jest",
     "lint": "lint ./src/*",
-    "bump": "changeset version",
-    "release": "yarn build && changeset publish",
+    "release": "yarn build && yarn changeset version && yarn changeset publish",
     "changeset": "changeset"
   },
   "prettier": {