docs: disable hover on scroll

mishamyrt · May 9, 2024 · f786895 · f786895
1 parent db874ac
commit f786895
Showing 1 changed file with 25 additions and 10 deletions.
diff --git a/preview/src/blocks/GlyphsTable/GlyphsTable.svelte b/preview/src/blocks/GlyphsTable/GlyphsTable.svelte
@@ -13,21 +13,13 @@
 
   let fontSize = 70
   let hovered = false
+  let scrolled = false
 
   let leaveTimeout: number
 
   $: height = fontSize + 30
   $: width = height * 1.3
 
-  onMount(() => {
-    const requests = VARIANTS.map(v => load(`./ttf/Lilex-${v}.ttf`))
-    Promise.all(requests)
-      .then(masters => {
-        fonts.push(...masters)
-        loading = false
-      })
-  })
-
   function handleHover () {
     hovered = true
     if (leaveTimeout) {
@@ -41,6 +33,29 @@
     }, 500)
   }
 
+  function handleScroll () {
+    if (!scrolled) {
+      scrolled = true
+      setTimeout(() => {
+        scrolled = false
+      }, 300)
+    }
+  }
+
+  onMount(() => {
+    const requests = VARIANTS.map(v => load(`./ttf/Lilex-${v}.ttf`))
+    Promise.all(requests)
+      .then(masters => {
+        fonts.push(...masters)
+        loading = false
+      })
+
+    document.addEventListener('scroll', handleScroll)
+    return () => {
+      document.removeEventListener('scroll', handleScroll)
+    }
+  })
+
   $: glyphs = loading || !(selectedVariant in fonts)
     ? []
     : renderGlyphs(fonts[selectedVariant])
@@ -67,7 +82,7 @@
     style:--glyph-width="{width}px"
     style:--glyph-height="{height}px"
     class="glyphs"
-    class:hover={hovered}>
+    class:hover={!scrolled && hovered}>
     {#each glyphs as glyph}
       <div class="glyph">
         <Glyph on:mouseenter={handleHover} on:mouseleave={handleLeave} {glyph} />