Merge pull request #14 from silvioprog/master

Applied many improvements

Author: andrelmlins

README.md

@@ -2,35 +2,37 @@
 
 [![npm version](https://badge.fury.io/js/svelte-infinite-scroll.svg)](https://www.npmjs.com/package/svelte-infinite-scroll) • [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/andrelmlins/svelte-infinite-scroll/blob/master/LICENSE) • [![Build Status](https://travis-ci.com/andrelmlins/svelte-infinite-scroll.svg?branch=master)](https://travis-ci.com/andrelmlins/svelte-infinite-scroll) • [![Netlify Status](https://api.netlify.com/api/v1/badges/a16b6807-8f05-4e03-8ed4-33e5162155bb/deploy-status)](https://app.netlify.com/sites/svelte-infinite-scroll/deploys) • [![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/andrelmlins/svelte-infinite-scroll.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/andrelmlins/svelte-infinite-scroll/context:javascript) • [![Gitter](https://badges.gitter.im/svelte-infinite-scroll/community.svg)](https://gitter.im/svelte-infinite-scroll/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
 
-Infinite Scroll Component to Svelte
+Infinite Scroll Component to Svelte.
 
 ## Installation
 
-```
+```bash
 npm i svelte-infinite-scroll
-// OR
+
+// or
+
 yarn add svelte-infinite-scroll
 ```
 
-<em>Note: to use this library in sapper, install as devDependency. See the [link](https://github.com/sveltejs/sapper-template#using-external-components).</em>
+_Note: to use this library in Sapper applications, install as devDependency. Take a look at [this link](https://github.com/sveltejs/sapper-template#using-external-components)._
 
-## Demo [Link](https://svelte-infinite-scroll.netlify.com/)
+## Demo [link](https://svelte-infinite-scroll.netlify.com/)
 
 Local demo:
 
-```
+```bash
 git clone https://github.com/andrelmlins/svelte-infinite-scroll.git
 cd svelte-infinite-scroll
 npm install && npm run dev
 ```
 
 ## Examples
 
-An example of how to use the library
+An example of how to use the library:
 
 ```js
 <script>
-  import SvelteInfiniteScroll from "svelte-infinite-scroll";
+  import InfiniteScroll from "svelte-infinite-scroll";
   import allCountries from "./countries.js";
 
   let page = 0;
@@ -55,11 +57,11 @@ An example of how to use the library
   {#each countries as country}
     <li>{country.name}</li>
   {/each}
-  <SvelteInfiniteScroll threshold={100} on:loadMore={() => page++} />
+  <InfiniteScroll threshold={100} on:loadMore={() => page++} />
 </ul>
 ```
 
-### Another Examples
+### 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/36d00aa55c7c4ff68914ce314f4e1ca4) | [Author](https://github.com/andrelmlins)
@@ -83,9 +85,9 @@ Component props:
 | ---------- | ----------------------------------------- |
 | `loadMore` | Tells you if there are more items to load |
 
-## NPM Statistics
+## NPM statistics
 
-Download stats for this NPM package
+Download stats for this NPM package.
 
 [![NPM](https://nodei.co/npm/svelte-infinite-scroll.png)](https://nodei.co/npm/svelte-infinite-scroll/)
 

src/lib/InfiniteScroll.svelte

@@ -9,28 +9,17 @@
   export let window = false;
 
   const dispatch = createEventDispatcher();
+
   let isLoadMore = false;
   let component;
   let beforeScrollHeight;
   let beforeScrollTop;
-
   let element;
 
-  onMount(() => {
-    if (window) {
-      element = document;
-    } else if (elementScroll) {
-      element = elementScroll;
-    } else {
-      element = component.parentNode;
-    }
-  });
-
   $: if (element) {
     if (reverse) {
       element.scrollTop = element.scrollHeight;
     }
-
     element.addEventListener("scroll", onScroll);
     element.addEventListener("resize", onScroll);
   }
@@ -40,18 +29,15 @@
       element.scrollHeight - beforeScrollHeight + beforeScrollTop;
   }
 
-  const onScroll = e => {
+  const onScroll = (e) => {
     if (!hasMore) return;
-
     const offset = calcOffset(e, reverse, horizontal);
-
     if (offset <= threshold) {
       if (!isLoadMore && hasMore) {
         dispatch("loadMore");
         beforeScrollHeight = e.target.scrollHeight;
         beforeScrollTop = e.target.scrollTop;
       }
-
       isLoadMore = true;
     } else {
       isLoadMore = false;
@@ -62,26 +48,28 @@
     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;
     }
+    return horizontal
+      ? element.scrollWidth - element.clientWidth - element.scrollLeft
+      : element.scrollHeight - element.clientHeight - element.scrollTop;
   };
 
   const getElement = () => {
     if (window) {
       return document;
-    } else if (elementScroll) {
+    }
+    if (elementScroll) {
       return elementScroll;
     }
-
     return component && component.parentNode;
   };
 
+  onMount(() => {
+    element = getElement();
+  });
+
   onDestroy(() => {
     if (element) {
       element.removeEventListener("scroll", onScroll);
@@ -90,4 +78,6 @@
   });
 </script>
 
-<div bind:this={component} style="width:0px" />
+{#if !window && !elementScroll}
+  <div bind:this={component} id="svelte-infinite-scroll" style="width: 0;" />
+{/if}