From debe04c0ca9c42d14fa7e16225a9c1c5d65e7f73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Roche?= <rchclement@gmail.com>
Date: Fri, 27 Dec 2024 16:23:55 +0100
Subject: [PATCH] dispatch scrollend event

---
 packages/core/src/lenis.ts | 35 ++++++++++++++++++++++++++---------
 playground/core/test.ts    |  4 ++--
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/packages/core/src/lenis.ts b/packages/core/src/lenis.ts
index caeecca3..898e9d80 100644
--- a/packages/core/src/lenis.ts
+++ b/packages/core/src/lenis.ts
@@ -157,6 +157,10 @@ export class Lenis {
     // Add event listeners
     this.options.wrapper.addEventListener('scroll', this.onNativeScroll, false)
 
+    this.options.wrapper.addEventListener('scrollend', this.onScrollEnd, {
+      capture: true,
+    })
+
     if (this.options.anchors && this.options.wrapper === window) {
       this.options.wrapper.addEventListener(
         'click',
@@ -194,6 +198,11 @@ export class Lenis {
       this.onNativeScroll,
       false
     )
+
+    this.options.wrapper.removeEventListener('scrollend', this.onScrollEnd, {
+      capture: true,
+    })
+
     this.options.wrapper.removeEventListener(
       'pointerdown',
       this.onPointerDown as EventListener,
@@ -243,18 +252,15 @@ export class Lenis {
     return this.emitter.off(event, callback)
   }
 
-  private setScroll(scroll: number) {
-    this.options.wrapper.addEventListener(
-      'scrollend',
-      (e) => {
+  private onScrollEnd = (e: Event | CustomEvent) => {
+    if (!(e instanceof CustomEvent)) {
+      if (this.isScrolling === 'smooth' || this.isScrolling === false) {
         e.stopPropagation()
-      },
-      {
-        capture: true,
-        once: true,
       }
-    )
+    }
+  }
 
+  private setScroll(scroll: number) {
     // behavior: 'instant' bypasses the scroll-behavior CSS property
 
     if (this.isHorizontal) {
@@ -667,6 +673,17 @@ export class Lenis {
           this.emit()
           onComplete?.(this)
           this.userData = {}
+
+          this.options.wrapper.dispatchEvent(
+            new CustomEvent('scrollend', {
+              bubbles: true,
+              cancelable: false,
+              detail: {
+                lenisScrollEnd: true,
+              },
+            })
+          )
+
           // avoid emitting event twice
           this.preventNextNativeScrollEvent()
         }
diff --git a/playground/core/test.ts b/playground/core/test.ts
index f6fd62ae..3533bea3 100644
--- a/playground/core/test.ts
+++ b/playground/core/test.ts
@@ -17,8 +17,8 @@ document
 //   console.log('scrollend')
 // })
 
-window.addEventListener('scrollend', () => {
-  console.log('scrollend')
+window.addEventListener('scrollend', (e) => {
+  console.log('scrollend', e)
 })
 
 window.addEventListener('hashchange', () => {