lenis 1.3.18-dev.0 → 1.3.18-dev.1

package/README.md

@@ -192,7 +192,7 @@ gsap.ticker.lagSmoothing(0);
 | `autoRaf`               | `boolean`                  | `false`                                            | Whether or not to automatically run `requestAnimationFrame` loop.                                                                                                                                                                                                                    |
 | `anchors`               | `boolean, ScrollToOptions` | `false`                                            | Scroll to anchor links when clicked. If `true` is passed, it will enable anchor links with default options. If `ScrollToOptions` is passed, it will enable anchor links with the given options.                                                                                      |
 | `autoToggle`            | `boolean`                  | `false`                                            | Automatically start or stop the lenis instance based on the wrapper's overflow property, ⚠️ this requires Lenis recommended CSS. Safari > 17.3, Chrome > 116 and Firefox > 128 ([https://caniuse.com/?search=transition-behavior](https://caniuse.com/?search=transition-behavior)). |
-| `allowNestedScroll`     | `boolean`                  | `false`                                            | Allow nested scrolls. If `true` is passed, it will allow nested scrolls. If `false` is passed, it will not allow nested scrolls. ⚠️ To be used with caution since this can lead to performance issues, prefer using `prevent` or `data-lenis-prevent` instead.                       |
+| `allowNestedScroll`     | `boolean`                  | `false`                                            | Automatically allow nested scrollable elements to scroll natively. This is the simplest way to handle nested scroll. ⚠️ Can create performance issues since it checks the DOM tree on every scroll event. If that's a concern, use `data-lenis-prevent` attributes instead.          |
 | `naiveDimensions`       | `boolean`                  | `false`                                            | If `true`, Lenis will use naive dimensions calculation. ⚠️ Be careful, this has a performance impact.                                                                                                                                                                                |
 | `stopInertiaOnNavigate` | `boolean`                  | `false`                                            | If `true`, Lenis will stop inertia when an internal link is clicked.                                                                                                                                                                                                                 |
 <br/>
@@ -266,21 +266,17 @@ gsap.ticker.lagSmoothing(0);
 
 ### Nested scroll
 
-#### Using Javascript
-
-```html
-<div id="modal">scrollable content</div>
-```
+The simplest and most reliable way to handle nested scrollable elements is to use the `allowNestedScroll` option:
 
 ```js
 const lenis = new Lenis({
-  prevent: (node) => node.id === 'modal',
+  allowNestedScroll: true,
 })
 ```
 
-[See example](https://codepen.io/ClementRoche/pen/emONGYN)
+This automatically detects nested scrollable elements and lets them scroll natively. However, this can create performance issues since Lenis needs to check the DOM tree on every scroll event. If you experience performance problems, use `data-lenis-prevent` instead.
 
-#### Using HTML
+#### Using HTML attributes
 
 ```html
 <div data-lenis-prevent>scrollable content</div>
@@ -288,18 +284,28 @@ const lenis = new Lenis({
 
 [See example](https://codepen.io/ClementRoche/pen/PoLdjpw)
 
-**Prevent wheel events only:**
+| Attribute                       | Description                          |
+|---------------------------------|--------------------------------------|
+| `data-lenis-prevent`            | Prevent all smooth scroll events     |
+| `data-lenis-prevent-wheel`      | Prevent wheel events only            |
+| `data-lenis-prevent-touch`      | Prevent touch events only            |
+| `data-lenis-prevent-vertical`   | Prevent vertical scroll events only  |
+| `data-lenis-prevent-horizontal` | Prevent horizontal scroll events only|
+
+#### Using Javascript
 
 ```html
-<div data-lenis-prevent-wheel>scrollable content</div>
+<div id="modal">scrollable content</div>
 ```
 
-**Prevent touch events only:**
-
-```html
-<div data-lenis-prevent-touch>scrollable content</div>
+```js
+const lenis = new Lenis({
+  prevent: (node) => node.id === 'modal',
+})
 ```
 
+[See example](https://codepen.io/ClementRoche/pen/emONGYN)
+
 
 
 ### Anchor links

package/dist/lenis-react.d.ts

@@ -29,6 +29,11 @@ type LenisProps = ComponentPropsWithoutRef<'div'> & {
      * Children
      */
     children?: ReactNode;
+    /**
+     * Class name to be applied to the wrapper div
+     * @default ''
+     */
+    className?: string | undefined;
 };
 type LenisRef = {
     /**
@@ -58,6 +63,7 @@ declare const ReactLenis: react.ForwardRefExoticComponent<Omit<react.DetailedHTM
     options?: Lenis.LenisOptions;
     autoRaf?: boolean;
     children?: react.ReactNode;
+    className?: string | undefined;
 } & react.RefAttributes<LenisRef>>;
 
 /**

package/dist/lenis-react.mjs

@@ -53,6 +53,7 @@ var ReactLenis = forwardRef(
     root = false,
     options = {},
     autoRaf = true,
+    className = "",
     ...props
   }, ref) => {
     const wrapperRef = useRef(null);
@@ -122,7 +123,15 @@ var ReactLenis = forwardRef(
       LenisContext.Provider,
       {
         value: { lenis, addCallback, removeCallback },
-        children: root && root !== "asChild" ? children : /* @__PURE__ */ jsx("div", { ref: wrapperRef, ...props, children: /* @__PURE__ */ jsx("div", { ref: contentRef, children }) })
+        children: root && root !== "asChild" ? children : /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: wrapperRef,
+            className: `${className} ${lenis?.className ?? ""}`.trim(),
+            ...props,
+            children: /* @__PURE__ */ jsx("div", { ref: contentRef, children })
+          }
+        )
       }
     );
   }

package/dist/lenis-react.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../packages/react/src/provider.tsx","../packages/react/src/store.ts","../packages/react/src/use-lenis.ts"],"sourcesContent":["import Lenis, { type ScrollCallback } from 'lenis'\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react'\nimport { Store } from './store'\nimport type { LenisContextValue, LenisProps, LenisRef } from './types'\n\nexport const LenisContext = createContext<LenisContextValue | null>(null)\n\n/**\n * The root store for the lenis context\n *\n * This store serves as a fallback for the context if it is not available\n * and allows us to use the global lenis instance above a provider\n */\nexport const rootLenisContextStore = new Store<LenisContextValue | null>(null)\n\n/**\n * React component to setup a Lenis instance\n */\nexport const ReactLenis = forwardRef<LenisRef, LenisProps>(\n  (\n    {\n      children,\n      root = false,\n      options = {},\n      autoRaf = true,\n      ...props\n    }: LenisProps,\n    ref\n  ) => {\n    const wrapperRef = useRef<HTMLDivElement>(null)\n    const contentRef = useRef<HTMLDivElement>(null)\n\n    const [lenis, setLenis] = useState<Lenis | undefined>(undefined)\n\n    // Setup ref\n    useImperativeHandle(\n      ref,\n      () => ({\n        wrapper: wrapperRef.current,\n        content: contentRef.current,\n        lenis,\n      }),\n      [lenis]\n    )\n\n    // Setup lenis instance\n    useEffect(() => {\n      const lenis = new Lenis({\n        ...options,\n        ...(wrapperRef.current &&\n          contentRef.current && {\n            wrapper: wrapperRef.current!,\n            content: contentRef.current!,\n          }),\n        autoRaf: options?.autoRaf ?? autoRaf, // this is to avoid breaking the autoRaf prop if it's still used (require breaking change)\n      })\n\n      setLenis(lenis)\n\n      return () => {\n        lenis.destroy()\n        setLenis(undefined)\n      }\n    }, [autoRaf, JSON.stringify({ ...options, wrapper: null, content: null })])\n\n    // Handle callbacks\n    const callbacksRefs = useRef<\n      {\n        callback: ScrollCallback\n        priority: number\n      }[]\n    >([])\n\n    const addCallback: LenisContextValue['addCallback'] = useCallback(\n      (callback, priority) => {\n        callbacksRefs.current.push({ callback, priority })\n        callbacksRefs.current.sort((a, b) => a.priority - b.priority)\n      },\n      []\n    )\n\n    const removeCallback: LenisContextValue['removeCallback'] = useCallback(\n      (callback) => {\n        callbacksRefs.current = callbacksRefs.current.filter(\n          (cb) => cb.callback !== callback\n        )\n      },\n      []\n    )\n\n    // This makes sure to set the global context if the root is true\n    useEffect(() => {\n      if (root && lenis) {\n        rootLenisContextStore.set({ lenis, addCallback, removeCallback })\n\n        return () => rootLenisContextStore.set(null)\n      }\n    }, [root, lenis, addCallback, removeCallback])\n\n    // Setup callback listeners\n    useEffect(() => {\n      if (!lenis) return\n\n      const onScroll: ScrollCallback = (data) => {\n        for (const { callback } of callbacksRefs.current) {\n          callback(data)\n        }\n      }\n\n      lenis.on('scroll', onScroll)\n\n      return () => {\n        lenis.off('scroll', onScroll)\n      }\n    }, [lenis])\n\n    if (!children) return null\n\n    return (\n      <LenisContext.Provider\n        value={{ lenis: lenis!, addCallback, removeCallback }}\n      >\n        {root && root !== 'asChild' ? (\n          children\n        ) : (\n          <div ref={wrapperRef} {...props}>\n            <div ref={contentRef}>{children}</div>\n          </div>\n        )}\n      </LenisContext.Provider>\n    )\n  }\n)\n","import { useEffect, useState } from 'react'\n\ntype Listener<S> = (state: S) => void\n\nexport class Store<S> {\n  private listeners: Listener<S>[] = []\n\n  constructor(private state: S) {}\n\n  set(state: S) {\n    this.state = state\n\n    for (const listener of this.listeners) {\n      listener(this.state)\n    }\n  }\n\n  subscribe(listener: Listener<S>) {\n    this.listeners = [...this.listeners, listener]\n    return () => {\n      this.listeners = this.listeners.filter((l) => l !== listener)\n    }\n  }\n\n  get() {\n    return this.state\n  }\n}\n\nexport function useStore<S>(store: Store<S>) {\n  const [state, setState] = useState(store.get())\n\n  useEffect(() => {\n    return store.subscribe((state) => setState(state))\n  }, [store])\n\n  return state\n}\n","import type { ScrollCallback } from 'lenis'\nimport { useContext, useEffect } from 'react'\nimport { LenisContext, rootLenisContextStore } from './provider'\nimport { useStore } from './store'\nimport type { LenisContextValue } from './types'\n\n// Fall back to an empty object if both context and store are not available\nconst fallbackContext: Partial<LenisContextValue> = {}\n\n/**\n * Hook to access the Lenis instance and its methods\n *\n * @example <caption>Scroll callback</caption>\n *          useLenis((lenis) => {\n *            if (lenis.isScrolling) {\n *              console.log('Scrolling...')\n *            }\n *\n *            if (lenis.progress === 1) {\n *              console.log('At the end!')\n *            }\n *          })\n *\n * @example <caption>Scroll callback with dependencies</caption>\n *          useLenis((lenis) => {\n *            if (lenis.isScrolling) {\n *              console.log('Scrolling...', someDependency)\n *            }\n *          }, [someDependency])\n * @example <caption>Scroll callback with priority</caption>\n *          useLenis((lenis) => {\n *            if (lenis.isScrolling) {\n *              console.log('Scrolling...')\n *            }\n *          }, [], 1)\n * @example <caption>Instance access</caption>\n *          const lenis = useLenis()\n *\n *          handleClick() {\n *            lenis.scrollTo(100, {\n *              lerp: 0.1,\n *              duration: 1,\n *              easing: (t) => t,\n *              onComplete: () => {\n *                console.log('Complete!')\n *              }\n *            })\n *          }\n */\nexport function useLenis(\n  callback?: ScrollCallback,\n  deps: unknown[] = [],\n  priority = 0\n) {\n  // Try to get the lenis instance from the context first\n  const localContext = useContext(LenisContext)\n  // Fall back to the root store if the context is not available\n  const rootContext = useStore(rootLenisContextStore)\n  // Fall back to the fallback context if all else fails\n  const currentContext = localContext ?? rootContext ?? fallbackContext\n\n  const { lenis, addCallback, removeCallback } = currentContext\n\n  useEffect(() => {\n    if (!(callback && addCallback && removeCallback && lenis)) return\n\n    addCallback(callback, priority)\n    callback(lenis)\n\n    return () => {\n      removeCallback(callback)\n    }\n  }, [lenis, addCallback, removeCallback, priority, ...deps, callback])\n\n  return lenis\n}\n"],"mappings":"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","names":["useEffect","useState","state","useState","useEffect","lenis","useEffect","useEffect"]}
+{"version":3,"sources":["../packages/react/src/provider.tsx","../packages/react/src/store.ts","../packages/react/src/use-lenis.ts"],"sourcesContent":["import Lenis, { type ScrollCallback } from 'lenis'\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react'\nimport { Store } from './store'\nimport type { LenisContextValue, LenisProps, LenisRef } from './types'\n\nexport const LenisContext = createContext<LenisContextValue | null>(null)\n\n/**\n * The root store for the lenis context\n *\n * This store serves as a fallback for the context if it is not available\n * and allows us to use the global lenis instance above a provider\n */\nexport const rootLenisContextStore = new Store<LenisContextValue | null>(null)\n\n/**\n * React component to setup a Lenis instance\n */\nexport const ReactLenis = forwardRef<LenisRef, LenisProps>(\n  (\n    {\n      children,\n      root = false,\n      options = {},\n      autoRaf = true,\n      className = '',\n      ...props\n    }: LenisProps,\n    ref\n  ) => {\n    const wrapperRef = useRef<HTMLDivElement>(null)\n    const contentRef = useRef<HTMLDivElement>(null)\n\n    const [lenis, setLenis] = useState<Lenis | undefined>(undefined)\n\n    // Setup ref\n    useImperativeHandle(\n      ref,\n      () => ({\n        wrapper: wrapperRef.current,\n        content: contentRef.current,\n        lenis,\n      }),\n      [lenis]\n    )\n\n    // Setup lenis instance\n    useEffect(() => {\n      const lenis = new Lenis({\n        ...options,\n        ...(wrapperRef.current &&\n          contentRef.current && {\n            wrapper: wrapperRef.current!,\n            content: contentRef.current!,\n          }),\n        autoRaf: options?.autoRaf ?? autoRaf, // this is to avoid breaking the autoRaf prop if it's still used (require breaking change)\n      })\n\n      setLenis(lenis)\n\n      return () => {\n        lenis.destroy()\n        setLenis(undefined)\n      }\n    }, [autoRaf, JSON.stringify({ ...options, wrapper: null, content: null })])\n\n    // Handle callbacks\n    const callbacksRefs = useRef<\n      {\n        callback: ScrollCallback\n        priority: number\n      }[]\n    >([])\n\n    const addCallback: LenisContextValue['addCallback'] = useCallback(\n      (callback, priority) => {\n        callbacksRefs.current.push({ callback, priority })\n        callbacksRefs.current.sort((a, b) => a.priority - b.priority)\n      },\n      []\n    )\n\n    const removeCallback: LenisContextValue['removeCallback'] = useCallback(\n      (callback) => {\n        callbacksRefs.current = callbacksRefs.current.filter(\n          (cb) => cb.callback !== callback\n        )\n      },\n      []\n    )\n\n    // This makes sure to set the global context if the root is true\n    useEffect(() => {\n      if (root && lenis) {\n        rootLenisContextStore.set({ lenis, addCallback, removeCallback })\n\n        return () => rootLenisContextStore.set(null)\n      }\n    }, [root, lenis, addCallback, removeCallback])\n\n    // Setup callback listeners\n    useEffect(() => {\n      if (!lenis) return\n\n      const onScroll: ScrollCallback = (data) => {\n        for (const { callback } of callbacksRefs.current) {\n          callback(data)\n        }\n      }\n\n      lenis.on('scroll', onScroll)\n\n      return () => {\n        lenis.off('scroll', onScroll)\n      }\n    }, [lenis])\n\n    if (!children) return null\n\n    return (\n      <LenisContext.Provider\n        value={{ lenis: lenis!, addCallback, removeCallback }}\n      >\n        {root && root !== 'asChild' ? (\n          children\n        ) : (\n          <div\n            ref={wrapperRef}\n            className={`${className} ${lenis?.className ?? ''}`.trim()}\n            {...props}\n          >\n            <div ref={contentRef}>{children}</div>\n          </div>\n        )}\n      </LenisContext.Provider>\n    )\n  }\n)\n","import { useEffect, useState } from 'react'\n\ntype Listener<S> = (state: S) => void\n\nexport class Store<S> {\n  private listeners: Listener<S>[] = []\n\n  constructor(private state: S) {}\n\n  set(state: S) {\n    this.state = state\n\n    for (const listener of this.listeners) {\n      listener(this.state)\n    }\n  }\n\n  subscribe(listener: Listener<S>) {\n    this.listeners = [...this.listeners, listener]\n    return () => {\n      this.listeners = this.listeners.filter((l) => l !== listener)\n    }\n  }\n\n  get() {\n    return this.state\n  }\n}\n\nexport function useStore<S>(store: Store<S>) {\n  const [state, setState] = useState(store.get())\n\n  useEffect(() => {\n    return store.subscribe((state) => setState(state))\n  }, [store])\n\n  return state\n}\n","import type { ScrollCallback } from 'lenis'\nimport { useContext, useEffect } from 'react'\nimport { LenisContext, rootLenisContextStore } from './provider'\nimport { useStore } from './store'\nimport type { LenisContextValue } from './types'\n\n// Fall back to an empty object if both context and store are not available\nconst fallbackContext: Partial<LenisContextValue> = {}\n\n/**\n * Hook to access the Lenis instance and its methods\n *\n * @example <caption>Scroll callback</caption>\n *          useLenis((lenis) => {\n *            if (lenis.isScrolling) {\n *              console.log('Scrolling...')\n *            }\n *\n *            if (lenis.progress === 1) {\n *              console.log('At the end!')\n *            }\n *          })\n *\n * @example <caption>Scroll callback with dependencies</caption>\n *          useLenis((lenis) => {\n *            if (lenis.isScrolling) {\n *              console.log('Scrolling...', someDependency)\n *            }\n *          }, [someDependency])\n * @example <caption>Scroll callback with priority</caption>\n *          useLenis((lenis) => {\n *            if (lenis.isScrolling) {\n *              console.log('Scrolling...')\n *            }\n *          }, [], 1)\n * @example <caption>Instance access</caption>\n *          const lenis = useLenis()\n *\n *          handleClick() {\n *            lenis.scrollTo(100, {\n *              lerp: 0.1,\n *              duration: 1,\n *              easing: (t) => t,\n *              onComplete: () => {\n *                console.log('Complete!')\n *              }\n *            })\n *          }\n */\nexport function useLenis(\n  callback?: ScrollCallback,\n  deps: unknown[] = [],\n  priority = 0\n) {\n  // Try to get the lenis instance from the context first\n  const localContext = useContext(LenisContext)\n  // Fall back to the root store if the context is not available\n  const rootContext = useStore(rootLenisContextStore)\n  // Fall back to the fallback context if all else fails\n  const currentContext = localContext ?? rootContext ?? fallbackContext\n\n  const { lenis, addCallback, removeCallback } = currentContext\n\n  useEffect(() => {\n    if (!(callback && addCallback && removeCallback && lenis)) return\n\n    addCallback(callback, priority)\n    callback(lenis)\n\n    return () => {\n      removeCallback(callback)\n    }\n  }, [lenis, addCallback, removeCallback, priority, ...deps, callback])\n\n  return lenis\n}\n"],"mappings":";;;AAAA,OAAO,WAAoC;AAC3C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAAA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAAC;AAAA,OACK;;;ACTP,SAAS,WAAW,gBAAgB;AAI7B,IAAM,QAAN,MAAe;AAAA,EAGpB,YAAoB,OAAU;AAAV;AAAA,EAAW;AAAA,EAFvB,YAA2B,CAAC;AAAA,EAIpC,IAAI,OAAU;AACZ,SAAK,QAAQ;AAEb,eAAW,YAAY,KAAK,WAAW;AACrC,eAAS,KAAK,KAAK;AAAA,IACrB;AAAA,EACF;AAAA,EAEA,UAAU,UAAuB;AAC/B,SAAK,YAAY,CAAC,GAAG,KAAK,WAAW,QAAQ;AAC7C,WAAO,MAAM;AACX,WAAK,YAAY,KAAK,UAAU,OAAO,CAAC,MAAM,MAAM,QAAQ;AAAA,IAC9D;AAAA,EACF;AAAA,EAEA,MAAM;AACJ,WAAO,KAAK;AAAA,EACd;AACF;AAEO,SAAS,SAAY,OAAiB;AAC3C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,MAAM,IAAI,CAAC;AAE9C,YAAU,MAAM;AACd,WAAO,MAAM,UAAU,CAACC,WAAU,SAASA,MAAK,CAAC;AAAA,EACnD,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO;AACT;;;ADsGY;AA9HL,IAAM,eAAe,cAAwC,IAAI;AAQjE,IAAM,wBAAwB,IAAI,MAAgC,IAAI;AAKtE,IAAM,aAAa;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP,UAAU,CAAC;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,aAAa,OAAuB,IAAI;AAC9C,UAAM,aAAa,OAAuB,IAAI;AAE9C,UAAM,CAAC,OAAO,QAAQ,IAAIC,UAA4B,MAAS;AAG/D;AAAA,MACE;AAAA,MACA,OAAO;AAAA,QACL,SAAS,WAAW;AAAA,QACpB,SAAS,WAAW;AAAA,QACpB;AAAA,MACF;AAAA,MACA,CAAC,KAAK;AAAA,IACR;AAGA,IAAAC,WAAU,MAAM;AACd,YAAMC,SAAQ,IAAI,MAAM;AAAA,QACtB,GAAG;AAAA,QACH,GAAI,WAAW,WACb,WAAW,WAAW;AAAA,UACpB,SAAS,WAAW;AAAA,UACpB,SAAS,WAAW;AAAA,QACtB;AAAA,QACF,SAAS,SAAS,WAAW;AAAA;AAAA,MAC/B,CAAC;AAED,eAASA,MAAK;AAEd,aAAO,MAAM;AACX,QAAAA,OAAM,QAAQ;AACd,iBAAS,MAAS;AAAA,MACpB;AAAA,IACF,GAAG,CAAC,SAAS,KAAK,UAAU,EAAE,GAAG,SAAS,SAAS,MAAM,SAAS,KAAK,CAAC,CAAC,CAAC;AAG1E,UAAM,gBAAgB,OAKpB,CAAC,CAAC;AAEJ,UAAM,cAAgD;AAAA,MACpD,CAAC,UAAU,aAAa;AACtB,sBAAc,QAAQ,KAAK,EAAE,UAAU,SAAS,CAAC;AACjD,sBAAc,QAAQ,KAAK,CAAC,GAAG,MAAM,EAAE,WAAW,EAAE,QAAQ;AAAA,MAC9D;AAAA,MACA,CAAC;AAAA,IACH;AAEA,UAAM,iBAAsD;AAAA,MAC1D,CAAC,aAAa;AACZ,sBAAc,UAAU,cAAc,QAAQ;AAAA,UAC5C,CAAC,OAAO,GAAG,aAAa;AAAA,QAC1B;AAAA,MACF;AAAA,MACA,CAAC;AAAA,IACH;AAGA,IAAAD,WAAU,MAAM;AACd,UAAI,QAAQ,OAAO;AACjB,8BAAsB,IAAI,EAAE,OAAO,aAAa,eAAe,CAAC;AAEhE,eAAO,MAAM,sBAAsB,IAAI,IAAI;AAAA,MAC7C;AAAA,IACF,GAAG,CAAC,MAAM,OAAO,aAAa,cAAc,CAAC;AAG7C,IAAAA,WAAU,MAAM;AACd,UAAI,CAAC,MAAO;AAEZ,YAAM,WAA2B,CAAC,SAAS;AACzC,mBAAW,EAAE,SAAS,KAAK,cAAc,SAAS;AAChD,mBAAS,IAAI;AAAA,QACf;AAAA,MACF;AAEA,YAAM,GAAG,UAAU,QAAQ;AAE3B,aAAO,MAAM;AACX,cAAM,IAAI,UAAU,QAAQ;AAAA,MAC9B;AAAA,IACF,GAAG,CAAC,KAAK,CAAC;AAEV,QAAI,CAAC,SAAU,QAAO;AAEtB,WACE;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,OAAO,EAAE,OAAe,aAAa,eAAe;AAAA,QAEnD,kBAAQ,SAAS,YAChB,WAEA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,WAAW,GAAG,SAAS,IAAI,OAAO,aAAa,EAAE,GAAG,KAAK;AAAA,YACxD,GAAG;AAAA,YAEJ,8BAAC,SAAI,KAAK,YAAa,UAAS;AAAA;AAAA,QAClC;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;;;AEhJA,SAAS,YAAY,aAAAE,kBAAiB;AAMtC,IAAM,kBAA8C,CAAC;AA0C9C,SAAS,SACd,UACA,OAAkB,CAAC,GACnB,WAAW,GACX;AAEA,QAAM,eAAe,WAAW,YAAY;AAE5C,QAAM,cAAc,SAAS,qBAAqB;AAElD,QAAM,iBAAiB,gBAAgB,eAAe;AAEtD,QAAM,EAAE,OAAO,aAAa,eAAe,IAAI;AAE/C,EAAAC,WAAU,MAAM;AACd,QAAI,EAAE,YAAY,eAAe,kBAAkB,OAAQ;AAE3D,gBAAY,UAAU,QAAQ;AAC9B,aAAS,KAAK;AAEd,WAAO,MAAM;AACX,qBAAe,QAAQ;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,OAAO,aAAa,gBAAgB,UAAU,GAAG,MAAM,QAAQ,CAAC;AAEpE,SAAO;AACT;","names":["useEffect","useState","state","useState","useEffect","lenis","useEffect","useEffect"]}

package/dist/lenis.css

@@ -1 +1 @@
-html.lenis,html.lenis body{height:auto}.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch]{overscroll-behavior:contain}.lenis.lenis-smooth iframe{pointer-events:none}.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}
+html.lenis,html.lenis body{height:auto}.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch],.lenis [data-lenis-prevent-vertical],.lenis [data-lenis-prevent-horizontal]{overscroll-behavior:contain}.lenis.lenis-smooth iframe{pointer-events:none}.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}

package/dist/lenis.d.ts

@@ -395,7 +395,7 @@ declare class Lenis {
     lerp, duration, easing, onStart, onComplete, force, // scroll even if stopped
     userData, }?: ScrollToOptions): void;
     private preventNextNativeScrollEvent;
-    private checkNestedScroll;
+    private hasNestedScroll;
     /**
      * The root element on which lenis is instanced
      */

package/dist/lenis.js

@@ -1,5 +1,5 @@
 // package.json
-var version = "1.3.18-dev.0";
+var version = "1.3.18-dev.1";
 
 // packages/core/src/maths.ts
 function clamp(min, input, max) {
@@ -632,8 +632,12 @@ var Lenis = class {
     let composedPath = event.composedPath();
     composedPath = composedPath.slice(0, composedPath.indexOf(this.rootElement));
     const prevent = this.options.prevent;
+    const gestureOrientation = Math.abs(deltaX) >= Math.abs(deltaY) ? "horizontal" : "vertical";
     if (composedPath.find(
-      (node) => node instanceof HTMLElement && (typeof prevent === "function" && prevent?.(node) || node.hasAttribute?.("data-lenis-prevent") || isTouch && node.hasAttribute?.("data-lenis-prevent-touch") || isWheel && node.hasAttribute?.("data-lenis-prevent-wheel") || this.options.allowNestedScroll && this.checkNestedScroll(node, { deltaX, deltaY }))
+      (node) => node instanceof HTMLElement && (typeof prevent === "function" && prevent?.(node) || node.hasAttribute?.("data-lenis-prevent") || gestureOrientation === "vertical" && node.hasAttribute?.("data-lenis-prevent-vertical") || gestureOrientation === "horizontal" && node.hasAttribute?.("data-lenis-prevent-horizontal") || isTouch && node.hasAttribute?.("data-lenis-prevent-touch") || isWheel && node.hasAttribute?.("data-lenis-prevent-wheel") || this.options.allowNestedScroll && this.hasNestedScroll(node, {
+        deltaX,
+        deltaY
+      }))
     ))
       return;
     if (this.isStopped || this.isLocked) {
@@ -921,7 +925,7 @@ var Lenis = class {
       this._preventNextNativeScrollEvent = false;
     });
   }
-  checkNestedScroll(node, { deltaX, deltaY }) {
+  hasNestedScroll(node, { deltaX, deltaY }) {
     const time = Date.now();
     if (!node._lenis) node._lenis = {};
     const cache = node._lenis;
@@ -929,24 +933,31 @@ var Lenis = class {
     let hasOverflowY;
     let isScrollableX;
     let isScrollableY;
+    let hasOverscrollBehaviorX;
+    let hasOverscrollBehaviorY;
     let scrollWidth;
     let scrollHeight;
     let clientWidth;
     let clientHeight;
-    const gestureOrientation = this.options.gestureOrientation;
     if (time - (cache.time ?? 0) > 2e3) {
       cache.time = Date.now();
       const computedStyle = window.getComputedStyle(node);
       cache.computedStyle = computedStyle;
-      const overflowXString = computedStyle.overflowX;
-      const overflowYString = computedStyle.overflowY;
-      hasOverflowX = ["auto", "overlay", "scroll"].includes(overflowXString);
-      hasOverflowY = ["auto", "overlay", "scroll"].includes(overflowYString);
+      hasOverflowX = ["auto", "overlay", "scroll"].includes(
+        computedStyle.overflowX
+      );
+      hasOverflowY = ["auto", "overlay", "scroll"].includes(
+        computedStyle.overflowY
+      );
+      hasOverscrollBehaviorX = ["auto"].includes(
+        computedStyle.overscrollBehaviorX
+      );
+      hasOverscrollBehaviorY = ["auto"].includes(
+        computedStyle.overscrollBehaviorY
+      );
       cache.hasOverflowX = hasOverflowX;
       cache.hasOverflowY = hasOverflowY;
       if (!(hasOverflowX || hasOverflowY)) return false;
-      if (gestureOrientation === "vertical" && !hasOverflowY) return false;
-      if (gestureOrientation === "horizontal" && !hasOverflowX) return false;
       scrollWidth = node.scrollWidth;
       scrollHeight = node.scrollHeight;
       clientWidth = node.clientWidth;
@@ -959,6 +970,8 @@ var Lenis = class {
       cache.scrollHeight = scrollHeight;
       cache.clientWidth = clientWidth;
       cache.clientHeight = clientHeight;
+      cache.hasOverscrollBehaviorX = hasOverscrollBehaviorX;
+      cache.hasOverscrollBehaviorY = hasOverscrollBehaviorY;
     } else {
       isScrollableX = cache.isScrollableX;
       isScrollableY = cache.isScrollableY;
@@ -968,50 +981,39 @@ var Lenis = class {
       scrollHeight = cache.scrollHeight;
       clientWidth = cache.clientWidth;
       clientHeight = cache.clientHeight;
+      hasOverscrollBehaviorX = cache.hasOverscrollBehaviorX;
+      hasOverscrollBehaviorY = cache.hasOverscrollBehaviorY;
     }
-    if (!((hasOverflowX || hasOverflowY) && (isScrollableX || isScrollableY))) {
+    if (!(hasOverflowX && isScrollableX || hasOverflowY && isScrollableY)) {
       return false;
     }
-    if (gestureOrientation === "vertical" && !(hasOverflowY && isScrollableY))
-      return false;
-    if (gestureOrientation === "horizontal" && !(hasOverflowX && isScrollableX))
-      return false;
-    let orientation;
-    if (gestureOrientation === "horizontal") {
-      orientation = "x";
-    } else if (gestureOrientation === "vertical") {
-      orientation = "y";
-    } else {
-      const isScrollingX = deltaX !== 0;
-      const isScrollingY = deltaY !== 0;
-      if (isScrollingX && hasOverflowX && isScrollableX) {
-        orientation = "x";
-      }
-      if (isScrollingY && hasOverflowY && isScrollableY) {
-        orientation = "y";
-      }
-    }
-    if (!orientation) return false;
+    const orientation = Math.abs(deltaX) >= Math.abs(deltaY) ? "horizontal" : "vertical";
     let scroll;
     let maxScroll;
     let delta;
     let hasOverflow;
     let isScrollable;
-    if (orientation === "x") {
-      scroll = node.scrollLeft;
+    let hasOverscrollBehavior;
+    if (orientation === "horizontal") {
+      scroll = Math.round(node.scrollLeft);
       maxScroll = scrollWidth - clientWidth;
       delta = deltaX;
       hasOverflow = hasOverflowX;
       isScrollable = isScrollableX;
-    } else if (orientation === "y") {
-      scroll = node.scrollTop;
+      hasOverscrollBehavior = hasOverscrollBehaviorX;
+    } else if (orientation === "vertical") {
+      scroll = Math.round(node.scrollTop);
       maxScroll = scrollHeight - clientHeight;
       delta = deltaY;
       hasOverflow = hasOverflowY;
       isScrollable = isScrollableY;
+      hasOverscrollBehavior = hasOverscrollBehaviorY;
     } else {
       return false;
     }
+    if (!hasOverscrollBehavior && (scroll === maxScroll || scroll === 0)) {
+      return true;
+    }
     const willScroll = delta > 0 ? scroll < maxScroll : scroll > 0;
     return willScroll && hasOverflow && isScrollable;
   }