[SmoothScroll] Update scroll properties from lenis

src/js/luge/core/Core.js

@@ -171,18 +171,27 @@ class Luge {
    * Scroll handler
    */
   scrollHandler () {
-    window.scrollTop = window.scrollY
-
-    // Backward compatibility
-    window.unifiedScrollTop = window.scrollTop
-
     if (!this.isScrolling) {
       this.scrollStart()
     }
 
     clearTimeout(this.timeouts.scrollEnd)
     this.timeouts.scrollEnd = setTimeout(this.scrollEnd.bind(this), 200)
 
+    if (!window.hasSmoothScroll) {
+      this.updateScroll()
+    }
+  }
+
+  /**
+   * Update scroll
+   */
+  updateScroll () {
+    window.scrollTop = window.scrollY
+
+    // Backward compatibility
+    window.unifiedScrollTop = window.scrollTop
+
     this.previousScrollTop = window.scrollTop
     window.scrollProgress = window.scrollTop / window.maxScrollTop
 

src/js/luge/plugins/SmoothScroll.js

@@ -1,4 +1,4 @@
-import Helpers from '../core/Helpers'
+import Core from '../core/Core'
 import Plugin from '../core/Plugin'
 
 import Lenis from '@studio-freight/lenis'
@@ -30,6 +30,10 @@ export default class SmoothScroll extends Plugin {
 
       this.lenis = new Lenis()
 
+      this.lenis.on('scroll', () => {
+        Core.updateScroll()
+      })
+
       document.documentElement.classList.add('has-smooth-scroll')
 
       this.luge.ticker.add(this.lenis.raf, this.lenis)

src/scss/luge.scss

@@ -1,6 +1,7 @@
 @import 'luge/easing';
 
 @import 'luge/cursor';
+@import 'luge/lenis';
 @import 'luge/loader';
 @import 'luge/preloader';
 @import 'luge/reveal';

src/scss/luge/_lenis.scss

@@ -0,0 +1,19 @@
+html.lenis {
+  height: auto;
+}
+
+.lenis.lenis-smooth {
+  scroll-behavior: auto !important;
+}
+
+.lenis.lenis-smooth [data-lenis-prevent] {
+  overscroll-behavior: contain;
+}
+
+.lenis.lenis-stopped {
+  overflow: hidden;
+}
+
+.lenis.lenis-scrolling iframe {
+  pointer-events: none;
+}