#8 - Create property reverse scroll

Author: andrelmlins

README.md

@@ -62,7 +62,7 @@ An example of how to use the library
 ### Another Examples
 
 - Infinite scroll with requests | [Link](https://svelte.dev/repl/4863a658f3584b81bbe3d9f54eb67899) | [Author](https://github.com/kilianso)
-- Infinite scroll reverse | [Link](https://svelte.dev/repl/4863a658f3584b81bbe3d9f54eb67899) | [Author](https://github.com/andrelmlins)
+- Infinite scroll reverse | [Link](https://svelte.dev/repl/36d00aa55c7c4ff68914ce314f4e1ca4) | [Author](https://github.com/andrelmlins)
 
 ## Properties
 
@@ -75,6 +75,7 @@ Component props:
 | hasMore       | bool   | true    | Tells you if there are more items to load |
 | loadMore      | func   | --      | Call with offset                          |
 | horizontal    | bool   | false   | Changing orientation                      |
+| reverse       | bool   | false   | Reveser scroll direction                  |
 
 ## NPM Statistics
 

src/dev/main.js

@@ -1,10 +1,7 @@
 import App from "./App.svelte";
 
 const app = new App({
-  target: document.body,
-  props: {
-    name: "world"
-  }
+  target: document.body
 });
 
 export default app;

src/lib/InfiniteScroll.svelte

@@ -3,33 +3,54 @@
 
   export let threshold = 0;
   export let horizontal = false;
-  export let elementScroll;
+  export let elementScroll = null;
   export let hasMore = true;
+  export let reverse = false;
 
   const dispatch = createEventDispatcher();
   let isLoadMore = false;
   let component;
+  let beforeScrollHeight;
+  let beforeScrollTop;
 
-  $: {
-    if (component || elementScroll) {
-      const element = elementScroll ? elementScroll : component.parentNode;
+  $: if (component || elementScroll) {
+    const element = elementScroll ? elementScroll : component.parentNode;
 
-      element.addEventListener("scroll", onScroll);
-      element.addEventListener("resize", onScroll);
+    if (reverse) {
+      element.scrollTop = element.scrollHeight;
     }
+
+    element.addEventListener("scroll", onScroll);
+    element.addEventListener("resize", onScroll);
+  }
+
+  $: if (isLoadMore && reverse) {
+    const element = elementScroll ? elementScroll : component.parentNode;
+
+    element.scrollTop =
+      element.scrollHeight - beforeScrollHeight + beforeScrollTop;
   }
 
   const onScroll = e => {
-    const element = e.target;
+    if (!hasMore) return;
 
-    const offset = horizontal
-      ? e.target.scrollWidth - e.target.clientWidth - e.target.scrollLeft
-      : e.target.scrollHeight - e.target.clientHeight - e.target.scrollTop;
+    let offset = 0;
+
+    if (reverse) {
+      offset = horizontal ? e.target.scrollLeft : e.target.scrollTop;
+    } else {
+      offset = horizontal
+        ? e.target.scrollWidth - e.target.clientWidth - e.target.scrollLeft
+        : e.target.scrollHeight - e.target.clientHeight - e.target.scrollTop;
+    }
 
     if (offset <= threshold) {
       if (!isLoadMore && hasMore) {
         dispatch("loadMore");
+        beforeScrollHeight = e.target.scrollHeight;
+        beforeScrollTop = e.target.scrollTop;
       }
+
       isLoadMore = true;
     } else {
       isLoadMore = false;