locked css class

darkroomengineering · Oct 12, 2023 · 5458ff7 · 5458ff7 · vercel · Oct 12, 2023
1 parent 755f1d3
commit 5458ff7
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 14 deletions.
diff --git a/bundled/lenis.js b/bundled/lenis.js
@@ -565,6 +565,7 @@
       this.toggleClass('lenis-smooth', false);
       this.toggleClass('lenis-scrolling', false);
       this.toggleClass('lenis-stopped', false);
+      this.toggleClass('lenis-locked', false);
     };
     _proto.on = function on(event, callback) {
       return this.emitter.on(event, callback);
@@ -777,11 +778,23 @@
           this.toggleClass('lenis-stopped', value);
         }
       }
+    }, {
+      key: "isLocked",
+      get: function get() {
+        return this.__isLocked;
+      },
+      set: function set(value) {
+        if (this.__isLocked !== value) {
+          this.__isLocked = value;
+          this.toggleClass('lenis-locked', value);
+        }
+      }
     }, {
       key: "className",
       get: function get() {
         var className = 'lenis';
         if (this.isStopped) className += ' lenis-stopped';
+        if (this.isLocked) className += ' lenis-locked';
         if (this.isScrolling) className += ' lenis-scrolling';
         if (this.isSmooth) className += ' lenis-smooth';
         return className;

diff --git a/dist/types/index.d.ts b/dist/types/index.d.ts
@@ -76,7 +76,8 @@ export default class Lenis {
     emitter: Emitter;
     dimensions: Dimensions;
     velocity: number;
-    isLocked: boolean;
+    set isLocked(arg: any);
+    get isLocked(): any;
     set isStopped(arg: any);
     get isStopped(): any;
     set isSmooth(arg: any);
@@ -124,6 +125,7 @@ export default class Lenis {
     __isSmooth: any;
     __isScrolling: any;
     __isStopped: any;
+    __isLocked: any;
     get className(): string;
     toggleClass(name: any, value: any): void;
 }

diff --git a/src/index.js b/src/index.js
@@ -138,6 +138,7 @@ export default class Lenis {
     this.toggleClass('lenis-smooth', false)
     this.toggleClass('lenis-scrolling', false)
     this.toggleClass('lenis-stopped', false)
+    this.toggleClass('lenis-locked', false)
   }
 
   on(event, callback) {
@@ -455,9 +456,21 @@ export default class Lenis {
     }
   }
 
+  get isLocked() {
+    return this.__isLocked
+  }
+
+  set isLocked(value) {
+    if (this.__isLocked !== value) {
+      this.__isLocked = value
+      this.toggleClass('lenis-locked', value)
+    }
+  }
+
   get className() {
     let className = 'lenis'
     if (this.isStopped) className += ' lenis-stopped'
+    if (this.isLocked) className += ' lenis-locked'
     if (this.isScrolling) className += ' lenis-scrolling'
     if (this.isSmooth) className += ' lenis-smooth'
     return className

diff --git a/website/styles/_scroll.scss b/website/styles/_scroll.scss
@@ -1,14 +1,19 @@
-html {
-  overflow: overlay;
-  //   &:not(.dev) {
-  //   scrollbar-width: none !important;
-
-  //   body {
-  //     -ms-overflow-style: none;
-  //   }
-  //   body::-webkit-scrollbar {
-  //     width: 0 !important;
-  //     height: 0 !important;
-  //   }
-  //   }
+html.lenis {
+  height: auto;
+}
+
+.lenis.lenis-smooth {
+  scroll-behavior: auto;
+}
+
+.lenis.lenis-smooth [data-lenis-prevent] {
+  overscroll-behavior: contain;
+}
+
+.lenis.lenis-stopped {
+  overflow: hidden;
+}
+
+.lenis.lenis-scrolling iframe {
+  pointer-events: none;
 }