fix scrollend, body wrapper, scroll-behavior

darkroomengineering · Dec 18, 2024 · a362f00 · a362f00
1 parent 8fc54bd
commit a362f00
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 20 deletions.
diff --git a/llms.txt → llms.old.txt b/llms.txt → llms.old.txt
diff --git a/packages/core/lenis.css b/packages/core/lenis.css
@@ -3,10 +3,6 @@ html.lenis body {
   height: auto;
 }
 
-.lenis.lenis-smooth {
-  scroll-behavior: auto !important;
-}
-
 .lenis.lenis-smooth [data-lenis-prevent] {
   overscroll-behavior: contain;
 }

diff --git a/packages/core/src/lenis.ts b/packages/core/src/lenis.ts
@@ -113,12 +113,8 @@ export class Lenis {
     // Set version
     window.lenisVersion = version
 
-    // Check if wrapper is html or body, fallback to window
-    if (
-      !wrapper ||
-      wrapper === document.documentElement ||
-      wrapper === document.body
-    ) {
+    // Check if wrapper is <html>, fallback to window
+    if (!wrapper || wrapper === document.documentElement) {
       wrapper = window
     }
 
@@ -231,10 +227,21 @@ export class Lenis {
 
   private setScroll(scroll: number) {
     // apply scroll value immediately
+    this.rootElement.addEventListener(
+      'scrollend',
+      (e) => {
+        e.stopPropagation()
+      },
+      {
+        capture: true,
+        once: true,
+      }
+    )
+
     if (this.isHorizontal) {
-      this.rootElement.scrollLeft = scroll
+      this.rootElement.scrollTo({ left: scroll, behavior: 'instant' })
     } else {
-      this.rootElement.scrollTop = scroll
+      this.rootElement.scrollTo({ top: scroll, behavior: 'instant' })
     }
   }
 

diff --git a/playground/core/style.css b/playground/core/style.css
@@ -21,6 +21,28 @@
 }
 
 #debug {
-  position: sticky;
+  position: fixed;
   top: 4rem;
 }
+
+/* html {
+  overflow: hidden;
+  height: 100%;
+}
+
+body {
+  overflow-y: auto;
+  height: 100%;
+} */
+
+/* this prevents UI to collapse on scroll */
+html,
+body {
+  overflow: hidden;
+  height: 100%;
+}
+
+main {
+  height: 100%;
+  overflow-y: auto;
+}
diff --git a/playground/core/test.ts b/playground/core/test.ts
@@ -8,11 +8,23 @@ document
   .insertAdjacentText('afterbegin', new LoremIpsum().generateParagraphs(20))
 document
   .querySelector('#app')!
-  .insertAdjacentText('beforeend', new LoremIpsum().generateParagraphs(20))
+  .insertAdjacentText(
+    'beforeend',
+    new LoremIpsum().generateParagraphs(20) + 'test123'
+  )
+
+document.querySelector('main')?.addEventListener('scrollend', () => {
+  console.log('scrollend')
+})
 
 const lenis = new Lenis({
+  // smoothWheel: false,
   autoRaf: true,
   syncTouch: true,
+  // wrapper: document.body,
+  // content: document.querySelector('main'),
+  wrapper: document.querySelector('main')!,
+  content: document.querySelector('main')?.children[0],
   // autoResize: false,
   // lerp: 0.9,
   // virtualScroll: (e) => {

diff --git a/playground/www/layouts/Layout.astro b/playground/www/layouts/Layout.astro
@@ -26,7 +26,11 @@ const { title } = Astro.props;
 			<a href="/react">React</a>
 			<a href="/vue">Vue</a>
 		</nav>
-		<slot />
+		<main>
+			<div>
+				<slot />
+			</div>
+		</main>
 	</body>
 </html>
 
@@ -46,14 +50,14 @@ const { title } = Astro.props;
   box-sizing: border-box;
 }
 
-html {
+/* html {
 	overflow-y: scroll;
-}
+} */
 
 body {
   margin: 0;
-  min-width: 320px;
-  min-height: 100vh;
+  /* min-width: 320px; */
+  /* min-height: 100vh; */
 }
 </style>
 
@@ -91,6 +95,6 @@ body {
 	}
 
 	body {
-		padding-top: 4rem;
+		/* padding-top: 4rem; */
 	}
 </style>