add scroll event handler

alexamy · May 24, 2020 · eb5c981 · eb5c981
1 parent 4a7c234
commit eb5c981
Showing 1 changed file with 10 additions and 0 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -4,6 +4,7 @@
   import getEmojis from './helpers/getEmojis';
 
   export let maxLength = 20;
+  let scrollY, innerHeight, body;
 
   const emojisFull = [...getEmojis()];
   let emojis = emojisFull;
@@ -21,8 +22,17 @@
   const addEmojis = e => {
     emojisView = emojis.slice(0, emojisView.length + maxLength);
   }
+
+  const handleScroll = e => {
+    const scrollEnd = scrollY + innerHeight;
+    const { scrollHeight } = document.body;
+    const windowEnd = Math.abs(scrollHeight - scrollEnd) < 50;
+    if(windowEnd) addEmojis();
+  }
 </script>
 
+<svelte:window bind:innerHeight bind:scrollY on:scroll={handleScroll}/>
+
 <main>
   <Input on:input={handleInput} />
   {#if emojisView.length}