fix dimensions

.gitignore

@@ -36,3 +36,4 @@ yarn-error.log*
 .vercel
 .eslintcache
 
+/packages/no-code

packages/lenis/dist/lenis.js

@@ -96,14 +96,21 @@
   }
 
   class Dimensions {
-    constructor({ wrapper, content, autoResize = true } = {}) {
+    constructor({
+      wrapper,
+      content,
+      autoResize = true,
+      debounce: debounceValue = 250,
+    } = {}) {
       this.wrapper = wrapper;
       this.content = content;
 
       if (autoResize) {
-        const resize = debounce(this.resize, 250);
+        const resize = debounce(this.resize, debounceValue);
 
-        if (this.wrapper !== window) {
+        if (this.wrapper === window) {
+          window.addEventListener('resize', resize, false);
+        } else {
           this.wrapperResizeObserver = new ResizeObserver(resize);
           this.wrapperResizeObserver.observe(this.wrapper);
         }
@@ -118,6 +125,7 @@
     destroy() {
       this.wrapperResizeObserver?.disconnect();
       this.contentResizeObserver?.disconnect();
+      window.removeEventListener('resize', resize, false);
     }
 
     resize = () => {
@@ -136,8 +144,13 @@
     }
 
     onContentResize = () => {
-      this.scrollHeight = this.content.scrollHeight;
-      this.scrollWidth = this.content.scrollWidth;
+      if (this.wrapper === window) {
+        this.scrollHeight = this.content.scrollHeight;
+        this.scrollWidth = this.content.scrollWidth;
+      } else {
+        this.scrollHeight = this.wrapper.scrollHeight;
+        this.scrollWidth = this.wrapper.scrollWidth;
+      }
     }
 
     get limit() {
@@ -301,7 +314,7 @@
   }
 
   class Lenis {
-      constructor({ wrapper = window, content = document.documentElement, wheelEventsTarget = wrapper, eventsTarget = wheelEventsTarget, smoothWheel = true, syncTouch = false, syncTouchLerp = 0.075, touchInertiaMultiplier = 35, duration, easing = (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), lerp = !duration && 0.1, infinite = false, orientation = 'vertical', gestureOrientation = 'vertical', touchMultiplier = 1, wheelMultiplier = 1, normalizeWheel = false, autoResize = true, } = {}) {
+      constructor({ wrapper = window, content = document.documentElement, wheelEventsTarget = wrapper, eventsTarget = wheelEventsTarget, smoothWheel = true, syncTouch = false, syncTouchLerp = 0.075, touchInertiaMultiplier = 35, duration, easing = (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), lerp = !duration && 0.1, infinite = false, orientation = 'vertical', gestureOrientation = 'vertical', touchMultiplier = 1, wheelMultiplier = 1, normalizeWheel = false, autoResize = true, __experimental__naiveDimensions = false, } = {}) {
           this.__isSmooth = false;
           this.__isScrolling = false;
           this.__isStopped = false;
@@ -325,11 +338,12 @@
               let composedPath = event.composedPath();
               composedPath = composedPath.slice(0, composedPath.indexOf(this.rootElement));
               if (!!composedPath.find((node) => {
-                  var _a, _b, _c, _d;
+                  var _a, _b, _c, _d, _e;
                   return ((_a = node.hasAttribute) === null || _a === void 0 ? void 0 : _a.call(node, 'data-lenis-prevent')) ||
                       (isTouch && ((_b = node.hasAttribute) === null || _b === void 0 ? void 0 : _b.call(node, 'data-lenis-prevent-touch'))) ||
                       (isWheel && ((_c = node.hasAttribute) === null || _c === void 0 ? void 0 : _c.call(node, 'data-lenis-prevent-wheel'))) ||
-                      ((_d = node.classList) === null || _d === void 0 ? void 0 : _d.contains('lenis'));
+                      (((_d = node.classList) === null || _d === void 0 ? void 0 : _d.contains('lenis')) &&
+                          !((_e = node.classList) === null || _e === void 0 ? void 0 : _e.contains('lenis-stopped')));
               }))
                   return;
               if (this.isStopped || this.isLocked) {
@@ -402,6 +416,7 @@
               wheelMultiplier,
               normalizeWheel,
               autoResize,
+              __experimental__naiveDimensions,
           };
           this.animate = new Animate();
           this.emitter = new Emitter();
@@ -464,10 +479,14 @@
           this.animate.stop();
       }
       start() {
+          if (!this.isStopped)
+              return;
           this.isStopped = false;
           this.reset();
       }
       stop() {
+          if (this.isStopped)
+              return;
           this.isStopped = true;
           this.animate.stop();
           this.reset();
@@ -566,7 +585,17 @@
               : this.options.wrapper;
       }
       get limit() {
-          return this.dimensions.limit[this.isHorizontal ? 'x' : 'y'];
+          if (this.options.__experimental__naiveDimensions) {
+              if (this.isHorizontal) {
+                  return this.rootElement.scrollWidth - this.rootElement.clientWidth;
+              }
+              else {
+                  return this.rootElement.scrollHeight - this.rootElement.clientHeight;
+              }
+          }
+          else {
+              return this.dimensions.limit[this.isHorizontal ? 'x' : 'y'];
+          }
       }
       get isHorizontal() {
           return this.options.orientation === 'horizontal';

packages/lenis/dist/types/dimensions.d.ts

@@ -1,8 +1,9 @@
 export class Dimensions {
-    constructor({ wrapper, content, autoResize }?: {
+    constructor({ wrapper, content, autoResize, debounce: debounceValue, }?: {
         wrapper: any;
         content: any;
         autoResize?: boolean | undefined;
+        debounce?: number | undefined;
     });
     wrapper: any;
     content: any;

packages/lenis/dist/types/index.d.ts

@@ -26,7 +26,7 @@ export default class Lenis {
     __isScrolling: boolean;
     __isStopped: boolean;
     __isLocked: boolean;
-    constructor({ wrapper, content, wheelEventsTarget, eventsTarget, smoothWheel, syncTouch, syncTouchLerp, touchInertiaMultiplier, duration, easing, lerp, infinite, orientation, gestureOrientation, touchMultiplier, wheelMultiplier, normalizeWheel, autoResize, }?: LenisOptions);
+    constructor({ wrapper, content, wheelEventsTarget, eventsTarget, smoothWheel, syncTouch, syncTouchLerp, touchInertiaMultiplier, duration, easing, lerp, infinite, orientation, gestureOrientation, touchMultiplier, wheelMultiplier, normalizeWheel, autoResize, __experimental__naiveDimensions, }?: LenisOptions);
     destroy(): void;
     on(event: string, callback: Function): any;
     off(event: string, callback: Function): any;

packages/lenis/package.json

@@ -2,6 +2,7 @@
   "name": "@studio-freight/lenis",
   "version": "1.0.37",
   "description": "Lenis is a smooth scroll library to normalize and smooth the scrolling experience across devices",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/darkroomengineering/lenis.git"

packages/lenis/src/dimensions.js

@@ -1,14 +1,21 @@
 import { debounce } from './debounce'
 
 export class Dimensions {
-  constructor({ wrapper, content, autoResize = true } = {}) {
+  constructor({
+    wrapper,
+    content,
+    autoResize = true,
+    debounce: debounceValue = 250,
+  } = {}) {
     this.wrapper = wrapper
     this.content = content
 
     if (autoResize) {
-      const resize = debounce(this.resize, 250)
+      const resize = debounce(this.resize, debounceValue)
 
-      if (this.wrapper !== window) {
+      if (this.wrapper === window) {
+        window.addEventListener('resize', resize, false)
+      } else {
         this.wrapperResizeObserver = new ResizeObserver(resize)
         this.wrapperResizeObserver.observe(this.wrapper)
       }
@@ -23,6 +30,7 @@ export class Dimensions {
   destroy() {
     this.wrapperResizeObserver?.disconnect()
     this.contentResizeObserver?.disconnect()
+    window.removeEventListener('resize', resize, false)
   }
 
   resize = () => {
@@ -41,8 +49,13 @@ export class Dimensions {
   }
 
   onContentResize = () => {
-    this.scrollHeight = this.content.scrollHeight
-    this.scrollWidth = this.content.scrollWidth
+    if (this.wrapper === window) {
+      this.scrollHeight = this.content.scrollHeight
+      this.scrollWidth = this.content.scrollWidth
+    } else {
+      this.scrollHeight = this.wrapper.scrollHeight
+      this.scrollWidth = this.wrapper.scrollWidth
+    }
   }
 
   get limit() {

packages/lenis/src/index.ts

@@ -63,6 +63,7 @@ export default class Lenis {
     wheelMultiplier = 1,
     normalizeWheel = false, // deprecated
     autoResize = true,
+    __experimental__naiveDimensions = false,
   }: LenisOptions = {}) {
     window.lenisVersion = version
 
@@ -90,6 +91,7 @@ export default class Lenis {
       wheelMultiplier,
       normalizeWheel,
       autoResize,
+      __experimental__naiveDimensions,
     }
 
     this.animate = new Animate()
@@ -192,7 +194,8 @@ export default class Lenis {
           node.hasAttribute?.('data-lenis-prevent') ||
           (isTouch && node.hasAttribute?.('data-lenis-prevent-touch')) ||
           (isWheel && node.hasAttribute?.('data-lenis-prevent-wheel')) ||
-          node.classList?.contains('lenis') // nested lenis instance
+          (node.classList?.contains('lenis') &&
+            !node.classList?.contains('lenis-stopped')) // nested lenis instance
       )
     )
       return
@@ -273,12 +276,14 @@ export default class Lenis {
   }
 
   start() {
+    if (!this.isStopped) return
     this.isStopped = false
 
     this.reset()
   }
 
   stop() {
+    if (this.isStopped) return
     this.isStopped = true
     this.animate.stop()
 
@@ -423,7 +428,15 @@ export default class Lenis {
   }
 
   get limit() {
-    return this.dimensions.limit[this.isHorizontal ? 'x' : 'y']
+    if (this.options.__experimental__naiveDimensions) {
+      if (this.isHorizontal) {
+        return this.rootElement.scrollWidth - this.rootElement.clientWidth
+      } else {
+        return this.rootElement.scrollHeight - this.rootElement.clientHeight
+      }
+    } else {
+      return this.dimensions.limit[this.isHorizontal ? 'x' : 'y']
+    }
   }
 
   get isHorizontal() {