fix lenis-scrolling css class

Author: clementroche

packages/core/src/lenis.ts

@@ -415,7 +415,11 @@ export class Lenis {
       this.direction = Math.sign(
         this.animatedScroll - lastScroll
       ) as Lenis['direction']
-      this.isScrolling = 'native'
+
+      if (!this.isStopped) {
+        this.isScrolling = 'native'
+      }
+
       this.emit()
 
       if (this.velocity !== 0) {
@@ -442,20 +446,19 @@ export class Lenis {
    */
   start() {
     if (!this.isStopped) return
-    this.isStopped = false
-
     this.reset()
+
+    this.isStopped = false
   }
 
   /**
    * Stop lenis scroll
    */
   stop() {
     if (this.isStopped) return
-    this.isStopped = true
-    this.animate.stop()
-
     this.reset()
+
+    this.isStopped = true
   }
 
   /**

playground/core/style.css

@@ -19,3 +19,8 @@
     width: 100vw;
   } */
 }
+
+#debug {
+  position: sticky;
+  top: 4rem;
+}

playground/core/test.ts

@@ -96,3 +96,15 @@ document.documentElement.addEventListener('wheel', (e) => {
 // }
 
 // requestAnimationFrame(raf)
+
+const stopButton = document.getElementById('stop')
+const startButton = document.getElementById('start')
+
+stopButton?.addEventListener('click', () => {
+  lenis.stop()
+  console.log('stop')
+})
+
+startButton?.addEventListener('click', () => {
+  lenis.start()
+})

playground/www/pages/core.astro

@@ -3,7 +3,11 @@ import '~/core/style.css'
 import Layout from '../layouts/Layout.astro'
 ---
 <Layout title="Lenis">
-	<button id="scroll-100">Scroll 100</button>
+	<div id="debug">
+		<button id="scroll-100">Scroll 100</button>
+		<button id="stop">Stop</button>
+		<button id="start">Start</button>
+	</div>
 	<div id="app">
 		<div id="nested">
 			<div id="nested-content"></div>