Property to use window

Author: andrelmlins

README.md

@@ -72,6 +72,7 @@ Component props:
 | ------------- | ------ | ------- | ----------------------------------------- |
 | threshold     | number | 0       | Threshold to call loadMore                |
 | elementScroll | node   | -       | Element to bind scroll                    |
+| window        | bool   | false   | Bind scroll in window                     |
 | hasMore       | bool   | true    | Tells you if there are more items to load |
 | loadMore      | func   | --      | Call with offset                          |
 | horizontal    | bool   | false   | Changing orientation                      |

src/lib/InfiniteScroll.svelte

@@ -6,15 +6,16 @@
   export let elementScroll = null;
   export let hasMore = true;
   export let reverse = false;
+  export let window = 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 || window) {
+    const element = getElement();
 
     if (reverse) {
       element.scrollTop = element.scrollHeight;
@@ -25,7 +26,7 @@
   }
 
   $: if (isLoadMore && reverse) {
-    const element = elementScroll ? elementScroll : component.parentNode;
+    const element = getElement();
 
     element.scrollTop =
       element.scrollHeight - beforeScrollHeight + beforeScrollTop;
@@ -34,15 +35,7 @@
   const onScroll = e => {
     if (!hasMore) return;
 
-    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;
-    }
+    const offset = calcOffset(e, reverse, horizontal);
 
     if (offset <= threshold) {
       if (!isLoadMore && hasMore) {
@@ -57,9 +50,33 @@
     }
   };
 
+  const calcOffset = (e, reverse, horizontal) => {
+    const element = e.target.documentElement
+      ? e.target.documentElement
+      : e.target;
+
+    if (reverse) {
+      return horizontal ? element.scrollLeft : element.scrollTop;
+    } else {
+      return horizontal
+        ? element.scrollWidth - element.clientWidth - element.scrollLeft
+        : element.scrollHeight - element.clientHeight - element.scrollTop;
+    }
+  };
+
+  const getElement = () => {
+    if (window) {
+      return document;
+    } else if (elementScroll) {
+      return elementScroll;
+    }
+
+    return component.parentNode;
+  };
+
   onDestroy(() => {
     if (component || elementScroll) {
-      const element = elementScroll ? elementScroll : component.parentNode;
+      const element = getElement();
 
       element.removeEventListener("scroll", null);
       element.removeEventListener("resize", null);