🐛 [Mobile] Ever so slightly improved scrolling (#65)

* 💄 [Navigation] Replace float with grid layout * 🐛 [Mobile] Disable scroll snapping on mobile and listen for hashchange * 🔥 [Index] Remove redundant hashchange listener
beefchimi · Jul 29, 2024 · 8efb850 · 8efb850
1 parent e937fa4
commit 8efb850
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 19 deletions.
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
@@ -90,6 +90,8 @@ const {id, items = []} = Astro.props;
     z-index: calc(var(--index-thermosphere) + 1);
     bottom: var(--nav-list-bottom);
     right: 0;
+    display: grid;
+    justify-items: end;
 
     &[aria-hidden='false'] {
       width: auto;
@@ -101,8 +103,6 @@ const {id, items = []} = Astro.props;
   }
 
   .Item {
-    float: right;
-    clear: both;
     transition: translate var(--speed) var(--ease);
     /* Stagger animation offset */
     transition-delay: calc(var(--speed-fastest) * var(--nav-item-index));

diff --git a/src/scripts/Portfolio.ts b/src/scripts/Portfolio.ts
@@ -34,7 +34,7 @@ export class Portfolio {
   #scrollHeight = 0;
   #sectionHeight = 0;
 
-  #isTicking = false;
+  #rafTicking = false;
 
   // TODO: There is a bug in Firefox Mobile that causes the "URL bar" to
   // re-appear everytime the url is updated (ex: via replaceState). I am
@@ -106,13 +106,17 @@ export class Portfolio {
   }
 
   teardown() {
+    window.removeEventListener('hashchange', this.#runAllUpdates);
     this.scroller.removeEventListener('scroll', this.#handleScroll);
     window.removeEventListener('resize', this.#handleResize);
 
     cancelAnimationFrame(this.#rafId);
   }
 
   #registerEventListeners() {
+    // Required alongside `handleScroll` for anchor tags.
+    window.addEventListener('hashchange', this.#runAllUpdates, false);
+
     // `passive` may not actually make sense for `scroll` events.
     this.scroller.addEventListener('scroll', this.#handleScroll, {
       passive: true,
@@ -172,18 +176,18 @@ export class Portfolio {
     );
   }
 
-  #rafCallback = () => {
+  #runAllUpdates = () => {
     this.#updateIndex();
     this.#updatePortfolioColor();
 
-    this.#isTicking = false;
+    this.#rafTicking = false;
   };
 
   #handleScroll = () => {
-    if (this.#isTicking) return;
+    if (this.#rafTicking) return;
 
-    this.#rafId = requestAnimationFrame(this.#rafCallback);
-    this.#isTicking = true;
+    this.#rafId = requestAnimationFrame(this.#runAllUpdates);
+    this.#rafTicking = true;
 
     this.#onScroll?.({
       currentIndex: this.currentIndex,

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -87,26 +87,23 @@ body {
   cursor: url('../assets/svg/cursors/CursorAuto.svg'), auto;
 }
 
-/* --- Smooth scroll + snapping --- */
+/* --- Scroll snapping --- */
 
 html {
   /*
-    It is possible that Safari may require this to be
-    added to the <body /> as well.
+    Scroll snapping creates many problems on iOS when used in combination
+     with `100vh`, so we are enabling this only for larger devices.
   */
-  scroll-snap-type: y mandatory;
-
-  /*
-    Ideally, we use `proximity` everywhere...
-    but iOS scrolling just feels janky when `proximity` is used.
-  */
-  @media (--min-tablet) {
+  @media (--min-desktop) {
     scroll-snap-type: y proximity;
   }
 }
 
 .section {
-  scroll-snap-align: start;
+  /* See note above about iOS issues */
+  @media (--min-desktop) {
+    scroll-snap-align: start;
+  }
 }
 
 /* --- Components --- */