use-scroller 1.2.0 → 2.1.0

package/dist/core.d.ts

@@ -0,0 +1,123 @@
+type Axis = 'x' | 'y';
+type ScrollTarget = HTMLElement | Window;
+
+interface ScrollMetrics {
+    x: number;
+    y: number;
+    minX: number;
+    maxX: number;
+    maxY: number;
+    viewportWidth: number;
+    viewportHeight: number;
+}
+declare function readScroll(target: ScrollTarget): ScrollMetrics;
+declare function isScrollable(element: HTMLElement, axis: Axis): boolean;
+declare function findScrollParent(element: HTMLElement, axis: Axis): ScrollTarget;
+
+type Easing = (t: number) => number;
+declare const easings: {
+    linear: (t: number) => number;
+    easeInCubic: (t: number) => number;
+    easeOutCubic: (t: number) => number;
+    easeInOutCubic: (t: number) => number;
+};
+declare function cubicBezier(x1: number, y1: number, x2: number, y2: number): Easing;
+
+type ScrollAnimation = {
+    type: 'tween';
+    duration?: number;
+    easing?: Easing;
+} | {
+    type: 'spring';
+    stiffness?: number;
+    damping?: number;
+    mass?: number;
+    velocity?: {
+        x?: number;
+        y?: number;
+    };
+} | {
+    type: 'instant';
+};
+type ScrollResult = 'completed' | 'interrupted' | 'cancelled';
+interface ScrollHandle {
+    finished: Promise<ScrollResult>;
+    cancel(): void;
+}
+interface AnimateScrollOptions {
+    animation?: ScrollAnimation;
+    interruptible?: boolean;
+    respectReducedMotion?: boolean;
+}
+interface ScrollDestination {
+    x?: number;
+    y?: number;
+}
+declare function animateScroll(target: ScrollTarget, to: ScrollDestination, options?: AnimateScrollOptions): ScrollHandle;
+declare function cancelScroll(target: ScrollTarget): void;
+
+interface ScrollState {
+    x: number;
+    y: number;
+    minX: number;
+    maxX: number;
+    maxY: number;
+    progressX: number;
+    progressY: number;
+    atTop: boolean;
+    atBottom: boolean;
+    atLeft: boolean;
+    atRight: boolean;
+    canScrollX: boolean;
+    canScrollY: boolean;
+    directionX: Direction;
+    directionY: Direction;
+    velocityX: number;
+    velocityY: number;
+    isScrolling: boolean;
+}
+type Direction = -1 | 0 | 1;
+declare function observeScroll(target: ScrollTarget, listener: (state: ScrollState) => void, { idleDelay }?: {
+    idleDelay?: number;
+}): () => void;
+
+declare function lockScroll({ allow }?: {
+    allow?: HTMLElement[];
+}): () => void;
+
+interface DragScrollOptions {
+    axis?: Axis;
+    mouse?: boolean;
+}
+declare function dragScroll(element: HTMLElement, { axis, mouse }?: DragScrollOptions): () => void;
+
+declare function readSnapPositions(container: HTMLElement, axis: Axis): number[];
+
+declare function observeActiveSection(sections: HTMLElement[], listener: (index: number) => void, { root, offset }?: {
+    root?: ScrollTarget;
+    offset?: number;
+}): () => void;
+
+type Edge = 'top' | 'bottom' | 'left' | 'right';
+type ScrollAlign = 'start' | 'center' | 'end' | 'nearest';
+interface ScrollToElementOptions extends AnimateScrollOptions {
+    align?: ScrollAlign;
+    offset?: number;
+}
+declare function scrollToEdge(target: ScrollTarget, edge: Edge, options?: AnimateScrollOptions): ScrollHandle;
+declare function scrollBy(target: ScrollTarget, delta: ScrollDestination, options?: AnimateScrollOptions): ScrollHandle;
+declare function scrollToElement(target: ScrollTarget, element: HTMLElement, options?: ScrollToElementOptions): ScrollHandle;
+
+interface RestoreScrollOptions {
+    storage?: Storage;
+    timeout?: number;
+}
+declare function restoreScroll(target: ScrollTarget, key: string, { storage, timeout }?: RestoreScrollOptions): () => void;
+
+interface StickToBottom {
+    scrollToBottom(options?: AnimateScrollOptions): ScrollHandle;
+    stop(): void;
+}
+declare function stickToBottom(element: HTMLElement, onChange?: (isAtBottom: boolean) => void): StickToBottom;
+
+export { type AnimateScrollOptions, type Axis, type DragScrollOptions, type Easing, type Edge, type RestoreScrollOptions, type ScrollAlign, type ScrollAnimation, type ScrollDestination, type ScrollHandle, type ScrollMetrics, type ScrollResult, type ScrollState, type ScrollTarget, type ScrollToElementOptions, type StickToBottom, animateScroll, cancelScroll, cubicBezier, dragScroll, easings, findScrollParent, isScrollable, lockScroll, observeActiveSection, observeScroll, readScroll, readSnapPositions, restoreScroll, scrollBy, scrollToEdge, scrollToElement, stickToBottom };

package/dist/core.js

@@ -0,0 +1,38 @@
+import {
+  animateScroll,
+  cancelScroll,
+  cubicBezier,
+  dragScroll,
+  easings,
+  findScrollParent,
+  isScrollable,
+  lockScroll,
+  observeActiveSection,
+  observeScroll,
+  readScroll,
+  readSnapPositions,
+  restoreScroll,
+  scrollBy,
+  scrollToEdge,
+  scrollToElement,
+  stickToBottom
+} from "./chunk-IFT3KMZJ.js";
+export {
+  animateScroll,
+  cancelScroll,
+  cubicBezier,
+  dragScroll,
+  easings,
+  findScrollParent,
+  isScrollable,
+  lockScroll,
+  observeActiveSection,
+  observeScroll,
+  readScroll,
+  readSnapPositions,
+  restoreScroll,
+  scrollBy,
+  scrollToEdge,
+  scrollToElement,
+  stickToBottom
+};

package/dist/index.d.ts

@@ -0,0 +1,51 @@
+import { ScrollDestination, AnimateScrollOptions, ScrollHandle, Edge, ScrollToElementOptions, ScrollState, DragScrollOptions, RestoreScrollOptions } from './core.js';
+export { Axis, Easing, ScrollAlign, ScrollAnimation, ScrollMetrics, ScrollResult, ScrollTarget, StickToBottom, animateScroll, cancelScroll, cubicBezier, dragScroll, easings, findScrollParent, isScrollable, lockScroll, observeActiveSection, observeScroll, readScroll, readSnapPositions, restoreScroll, scrollBy, scrollToEdge, scrollToElement, stickToBottom } from './core.js';
+import { RefObject } from 'react';
+
+type ElementTarget = RefObject<HTMLElement | null> | 'window';
+
+interface ScrollActions {
+    scrollTo(position: ScrollDestination, options?: AnimateScrollOptions): ScrollHandle;
+    scrollBy(delta: ScrollDestination, options?: AnimateScrollOptions): ScrollHandle;
+    scrollToEdge(edge: Edge, options?: AnimateScrollOptions): ScrollHandle;
+    scrollToElement(element: HTMLElement | RefObject<HTMLElement | null>, options?: ScrollToElementOptions): ScrollHandle;
+    cancel(): void;
+}
+declare function useScroll(target: ElementTarget, options?: AnimateScrollOptions): ScrollActions;
+
+declare function useScrollState(target: ElementTarget): ScrollState;
+declare function useScrollState<T>(target: ElementTarget, select: (state: ScrollState) => T): T;
+
+declare function useScrollLock(active: boolean, { allow }?: {
+    allow?: Array<RefObject<HTMLElement | null>>;
+}): void;
+
+declare function useDragScroll(ref: RefObject<HTMLElement | null>, { axis, mouse }?: DragScrollOptions): void;
+
+type Section = RefObject<HTMLElement | null> | string;
+declare function useScrollSpy(sections: Section[], { root, offset }?: {
+    root?: RefObject<HTMLElement | null>;
+    offset?: number;
+}): number;
+
+interface InView {
+    inView: boolean;
+    entry: IntersectionObserverEntry | null;
+}
+interface InViewOptions {
+    root?: RefObject<HTMLElement | null>;
+    rootMargin?: string;
+    threshold?: number | number[];
+    once?: boolean;
+}
+declare function useInView(ref: RefObject<HTMLElement | null>, { root, rootMargin, threshold, once }?: InViewOptions): InView;
+
+declare function useScrollRestoration(target: ElementTarget, key: string, { storage, timeout }?: RestoreScrollOptions): void;
+
+interface StickToBottomState {
+    isAtBottom: boolean;
+    scrollToBottom(options?: AnimateScrollOptions): ScrollHandle;
+}
+declare function useStickToBottom(target: RefObject<HTMLElement | null>): StickToBottomState;
+
+export { AnimateScrollOptions, DragScrollOptions, Edge, type InView, type InViewOptions, RestoreScrollOptions, type ScrollActions, ScrollDestination, ScrollHandle, ScrollState, ScrollToElementOptions, type StickToBottomState, useDragScroll, useInView, useScroll, useScrollLock, useScrollRestoration, useScrollSpy, useScrollState, useStickToBottom };

package/dist/index.js

@@ -0,0 +1,348 @@
+'use client'
+import {
+  animateScroll,
+  cancelScroll,
+  cubicBezier,
+  dragScroll,
+  easings,
+  findScrollParent,
+  initialScrollState,
+  isScrollable,
+  isWindow,
+  lockScroll,
+  observeActiveSection,
+  observeScroll,
+  readScroll,
+  readSnapPositions,
+  restoreScroll,
+  scrollBy,
+  scrollToEdge,
+  scrollToElement,
+  stickToBottom
+} from "./chunk-IFT3KMZJ.js";
+
+// src/react/use-scroll.ts
+import { useRef as useRef2, useState } from "react";
+
+// src/react/use-element-effect.ts
+import { useEffect, useLayoutEffect, useRef } from "react";
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function resolveTarget(target) {
+  return target === "window" ? window : target.current;
+}
+function useElementEffect(target, effect, deps) {
+  const subscription = useRef(null);
+  function sync() {
+    const resolved = resolveTarget(target);
+    const previous = subscription.current;
+    if (previous && previous.target === resolved && sameDeps(previous.deps, deps)) return;
+    if (previous == null ? void 0 : previous.cleanup) previous.cleanup();
+    subscription.current = {
+      target: resolved,
+      deps,
+      cleanup: resolved ? effect(resolved) : void 0
+    };
+  }
+  useIsomorphicLayoutEffect(sync);
+  useEffect(sync);
+  useIsomorphicLayoutEffect(
+    () => () => {
+      var _a, _b;
+      (_b = (_a = subscription.current) == null ? void 0 : _a.cleanup) == null ? void 0 : _b.call(_a);
+      subscription.current = null;
+    },
+    []
+  );
+}
+function sameDeps(a, b) {
+  return a.length === b.length && a.every((dep, i) => Object.is(dep, b[i]));
+}
+
+// src/react/use-scroll.ts
+function useScroll(target, options) {
+  const latest = useRef2({ target, options });
+  const lastStarted = useRef2(null);
+  useIsomorphicLayoutEffect(() => {
+    latest.current = { target, options };
+  });
+  useIsomorphicLayoutEffect(() => () => {
+    var _a;
+    return (_a = lastStarted.current) == null ? void 0 : _a.cancel();
+  }, []);
+  const [actions] = useState(() => {
+    function attachedTarget() {
+      const resolved = resolveTarget(latest.current.target);
+      if (!resolved) throw new Error("useScroll: ref is not attached to an element");
+      return resolved;
+    }
+    function track(handle) {
+      lastStarted.current = handle;
+      return handle;
+    }
+    function withDefaults(perCall) {
+      return { ...latest.current.options, ...perCall };
+    }
+    return {
+      scrollTo: (position, perCall) => track(animateScroll(attachedTarget(), position, withDefaults(perCall))),
+      scrollBy: (delta, perCall) => track(scrollBy(attachedTarget(), delta, withDefaults(perCall))),
+      scrollToEdge: (edge, perCall) => track(scrollToEdge(attachedTarget(), edge, withDefaults(perCall))),
+      scrollToElement: (element, perCall) => track(scrollToElement(attachedTarget(), attachedElement(element), withDefaults(perCall))),
+      cancel() {
+        const resolved = resolveTarget(latest.current.target);
+        if (resolved) cancelScroll(resolved);
+      }
+    };
+  });
+  return actions;
+}
+function attachedElement(element) {
+  if (!("current" in element)) return element;
+  if (!element.current) {
+    throw new Error("useScroll: scrollToElement ref is not attached to an element");
+  }
+  return element.current;
+}
+
+// src/react/use-scroll-state.ts
+import { useMemo, useState as useState2, useSyncExternalStore } from "react";
+function useScrollState(target, select) {
+  const [store] = useState2(createScrollStore);
+  useElementEffect(target, (element) => observeScroll(element, store.set), [store]);
+  const [getSnapshot, getServerSnapshot] = useMemo(() => {
+    const choose = select != null ? select : identity;
+    const selectFrom = memoizeLast(choose);
+    return [() => selectFrom(store.get()), () => selectFrom(initialScrollState)];
+  }, [store, select]);
+  return useSyncExternalStore(store.subscribe, getSnapshot, getServerSnapshot);
+}
+function createScrollStore() {
+  let state = initialScrollState;
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    get: () => state,
+    set(next) {
+      state = next;
+      for (const listener of listeners) listener();
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    }
+  };
+}
+function memoizeLast(fn) {
+  let last = null;
+  return (arg) => {
+    if (last === null || last.arg !== arg) last = { arg, result: fn(arg) };
+    return last.result;
+  };
+}
+function identity(value) {
+  return value;
+}
+
+// src/react/use-scroll-lock.ts
+import { useRef as useRef3 } from "react";
+function useScrollLock(active, { allow = [] } = {}) {
+  const held = useRef3(null);
+  useIsomorphicLayoutEffect(() => {
+    const previous = held.current;
+    if (!active) {
+      previous == null ? void 0 : previous.unlock();
+      held.current = null;
+      return;
+    }
+    const elements = allow.flatMap((ref) => ref.current ? [ref.current] : []);
+    if (previous && sameElements(previous.allow, elements)) return;
+    held.current = { allow: elements, unlock: lockScroll({ allow: elements }) };
+    previous == null ? void 0 : previous.unlock();
+  });
+  useIsomorphicLayoutEffect(
+    () => () => {
+      var _a;
+      (_a = held.current) == null ? void 0 : _a.unlock();
+      held.current = null;
+    },
+    []
+  );
+}
+function sameElements(a, b) {
+  return a.length === b.length && a.every((element, i) => element === b[i]);
+}
+
+// src/react/use-drag-scroll.ts
+function useDragScroll(ref, { axis = "x", mouse = false } = {}) {
+  useElementEffect(
+    ref,
+    (element) => {
+      if (isWindow(element)) throw new Error("useDragScroll: ref must point at an element");
+      return dragScroll(element, { axis, mouse });
+    },
+    [axis, mouse]
+  );
+}
+
+// src/react/use-scroll-spy.ts
+import { useRef as useRef4, useState as useState3 } from "react";
+function useScrollSpy(sections, { root, offset = 0 } = {}) {
+  const [active, setActive] = useState3(-1);
+  const subscription = useRef4(null);
+  useIsomorphicLayoutEffect(() => {
+    const previous = subscription.current;
+    const rootTarget = resolveTarget(root != null ? root : "window");
+    if (!rootTarget) {
+      previous == null ? void 0 : previous.unsubscribe();
+      subscription.current = null;
+      return;
+    }
+    const elements = sections.map(resolveSection);
+    if (previous && previous.root === rootTarget && previous.offset === offset && sameElements2(previous.sections, elements)) {
+      return;
+    }
+    previous == null ? void 0 : previous.unsubscribe();
+    subscription.current = {
+      root: rootTarget,
+      sections: elements,
+      offset,
+      unsubscribe: observeActiveSection(elements, setActive, { root: rootTarget, offset })
+    };
+  });
+  useIsomorphicLayoutEffect(
+    () => () => {
+      var _a;
+      (_a = subscription.current) == null ? void 0 : _a.unsubscribe();
+      subscription.current = null;
+    },
+    []
+  );
+  return active;
+}
+function resolveSection(section, index) {
+  if (typeof section === "string") {
+    const element = document.getElementById(section);
+    if (!element) throw new Error(`useScrollSpy: no element with id "${section}"`);
+    return element;
+  }
+  if (!section.current) {
+    throw new Error(`useScrollSpy: section ref at index ${index} is not attached to an element`);
+  }
+  return section.current;
+}
+function sameElements2(a, b) {
+  return a.length === b.length && a.every((element, i) => element === b[i]);
+}
+
+// src/react/use-in-view.ts
+import { useRef as useRef5, useState as useState4 } from "react";
+var NOT_IN_VIEW = { inView: false, entry: null };
+function useInView(ref, { root, rootMargin, threshold, once = false } = {}) {
+  const [state, setState] = useState4(NOT_IN_VIEW);
+  const observation = useRef5(null);
+  const seenOnce = useRef5(false);
+  useIsomorphicLayoutEffect(() => {
+    const previous = observation.current;
+    const element = ref.current;
+    const rootElement = root ? root.current : null;
+    if (!element || root && !rootElement || seenOnce.current) {
+      previous == null ? void 0 : previous.disconnect();
+      observation.current = null;
+      return;
+    }
+    const settings = JSON.stringify([rootMargin, threshold, once]);
+    if (previous && previous.element === element && previous.root === rootElement && previous.settings === settings) {
+      return;
+    }
+    previous == null ? void 0 : previous.disconnect();
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[entries.length - 1];
+        const inView = entry.isIntersecting && observer.thresholds.some((t) => entry.intersectionRatio >= t);
+        setState({ inView, entry });
+        if (once && inView) {
+          seenOnce.current = true;
+          observer.disconnect();
+        }
+      },
+      { root: rootElement, rootMargin, threshold }
+    );
+    observer.observe(element);
+    observation.current = {
+      element,
+      root: rootElement,
+      settings,
+      disconnect: () => observer.disconnect()
+    };
+  });
+  useIsomorphicLayoutEffect(
+    () => () => {
+      var _a;
+      (_a = observation.current) == null ? void 0 : _a.disconnect();
+      observation.current = null;
+    },
+    []
+  );
+  return state;
+}
+
+// src/react/use-scroll-restoration.ts
+function useScrollRestoration(target, key, { storage, timeout } = {}) {
+  useElementEffect(target, (element) => restoreScroll(element, key, { storage, timeout }), [
+    key,
+    storage,
+    timeout
+  ]);
+}
+
+// src/react/use-stick-to-bottom.ts
+import { useRef as useRef6, useState as useState5 } from "react";
+function useStickToBottom(target) {
+  const [isAtBottom, setIsAtBottom] = useState5(true);
+  const attached = useRef6(null);
+  useElementEffect(
+    target,
+    (element) => {
+      if (isWindow(element)) throw new Error("useStickToBottom: target must be an element ref");
+      const sticking = stickToBottom(element, setIsAtBottom);
+      attached.current = sticking;
+      return () => {
+        sticking.stop();
+        if (attached.current === sticking) attached.current = null;
+      };
+    },
+    []
+  );
+  const [scrollToBottom] = useState5(() => (options) => {
+    if (!attached.current) throw new Error("useStickToBottom: ref is not attached to an element");
+    return attached.current.scrollToBottom(options);
+  });
+  return { isAtBottom, scrollToBottom };
+}
+export {
+  animateScroll,
+  cancelScroll,
+  cubicBezier,
+  dragScroll,
+  easings,
+  findScrollParent,
+  isScrollable,
+  lockScroll,
+  observeActiveSection,
+  observeScroll,
+  readScroll,
+  readSnapPositions,
+  restoreScroll,
+  scrollBy,
+  scrollToEdge,
+  scrollToElement,
+  stickToBottom,
+  useDragScroll,
+  useInView,
+  useScroll,
+  useScrollLock,
+  useScrollRestoration,
+  useScrollSpy,
+  useScrollState,
+  useStickToBottom
+};

package/package.json

@@ -1,14 +1,25 @@
 {
   "name": "use-scroller",
-  "version": "1.2.0",
+  "version": "2.1.0",
   "author": "silvi lila",
   "license": "MIT",
-  "main": "./dist/cjs/index.js",
-  "module": "./dist/esm/index.js",
-  "types": "./dist/esm/index.d.ts",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./core": {
+      "types": "./dist/core.d.ts",
+      "default": "./dist/core.js"
+    }
+  },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "keywords": [
     "react",
@@ -17,16 +28,13 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/silvi97lila/use-scroller.git"
+    "url": "git+https://github.com/silverlila/use-scroller.git"
   },
   "scripts": {
-    "build": "yarn clean && yarn build:esm && yarn build:cjs",
-    "build:watch": "yarn build --watch",
-    "build:esm": "tsc",
-    "build:cjs": "tsc --module commonjs --outDir dist/cjs",
-    "clean": "rm -rf ./dist",
-    "test": "jest",
-    "lint": "lint ./src/*",
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "release": "yarn build && yarn changeset version && yarn changeset publish",
     "changeset": "changeset"
   },
@@ -37,23 +45,29 @@
     "trailingComma": "es5"
   },
   "peerDependencies": {
-    "react": "^16 || ^17 || ^18",
-    "react-dom": "^16 || ^17 || ^18"
+    "react": "^18 || ^19"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-typescript": "^7.18.6",
     "@changesets/cli": "^2.26.0",
-    "@testing-library/react": "^13.4.0",
-    "@types/jest": "^29.2.3",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.9",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
     "@typescript-eslint/eslint-plugin": "^5.44.0",
     "@typescript-eslint/parser": "^5.44.0",
+    "@vitest/browser-playwright": "^4.1.11",
     "eslint": "^8.28.0",
     "eslint-plugin-react": "^7.31.11",
-    "jest": "^29.3.1",
+    "playwright": "^1.63.0",
     "prettier": "2.8.0",
-    "typescript": "^4.9.3"
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.11",
+    "vitest-browser-react": "^2.3.0"
   }
 }

package/dist/cjs/hooks/use-iso-morphic-effect.d.ts

@@ -1,2 +0,0 @@
-import { useEffect } from 'react';
-export declare const useIsoMorphicEffect: typeof useEffect;

package/dist/cjs/hooks/use-iso-morphic-effect.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsoMorphicEffect = void 0;
-var react_1 = require("react");
-var utils_1 = require("../utils");
-exports.useIsoMorphicEffect = utils_1.isServer ? react_1.useEffect : react_1.useLayoutEffect;

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

@@ -1,24 +0,0 @@
-/// <reference types="react" />
-import { ScrollOptions } from '../types';
-export declare function useScroll<T extends HTMLElement>(props?: Partial<ScrollOptions>): {
-    ref: import("react").RefObject<T>;
-    state: {
-        left: number;
-        top: number;
-        isScrollable: boolean;
-        isScrolledLeft: boolean;
-        isScrolledRight: boolean;
-        isScrolledTop: boolean;
-        isScrolledBottom: boolean;
-        maxScrollLeft: number;
-        maxScrollTop: number;
-        scrollPercentageX: number;
-        scrollPercentageY: number;
-    };
-    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;
-};