title: Svelte: How to fetchMore if a user has scrolled to end of page
body: <p>I have a Component which fetches posts from a graphql server. It shall fetch more posts if the user is at the bottom of the page. How can I check if he has reached it? I looked on clientHeight, innerHeight and outerHeight but only clientHeight made any sense to work with from those. Probalby I have to substract somethin from it but I don't know how what exactly and what I am missing?</p>
  
  <pre><code>&lt;script&gt;
      import {getClient, query} from 'svelte-apollo';
      import ContentWrapper from '../layout/ContentWrapper.svelte';
      import {GET_POSTS} from "../services/posts/postsApi";
  
      let pageInfo;
      let first = 2;
      let after;
  
      const client = getClient();
      let posts = query(client, {query: GET_POSTS, variables: {first}});
  
      const fetchMore = () =&gt; {
          posts.fetchMore({
              variables: {first, after},
              updateQuery: (previousResult, {fetchMoreResult}) =&gt; {
                  const newEdges = fetchMoreResult.getPosts.edges;
                  const pageInfo = fetchMoreResult.getPosts.pageInfo;
  
                  return newEdges.length
                          ? {
                              getPosts: {
                                  __typename: previousResult.getPosts.__typename,
                                  edges: [...previousResult.getPosts.edges, ...newEdges],
                                  pageInfo
                              }
                          }
                          : previousResult;
              }
          })
      };
  
      const setState = queryData =&gt; {
          pageInfo = queryData.getPosts.pageInfo;
          after = pageInfo.endCursor;
          return '';
      };
  
      let y;
      let clientHeight;
  
      const checkScrollPosition = () =&gt; {
          if(clientHeight &lt;= y)
              fetchMore();
      }
  &lt;/script&gt;
  
  &lt;svelte:window on:scroll={checkScrollPosition} bind:scrollY={y} /&gt;
  
  &lt;ContentWrapper&gt;
      &lt;div slot="header"&gt;
          &lt;h4&gt;Page of Pagination&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div slot="body" bind:clientHeight={clientHeight}&gt;
          {#await $posts}
              &lt;h3&gt;Loading...&lt;/h3&gt;
          {:then result}
              {setState(result.data)}
              {#each result.data.getPosts.edges as post}
                  &lt;div class="card"&gt;
                      &lt;div class="card-content"&gt;
                          &lt;p class="card-text"&gt;{post.node.body}&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              {/each}
              &lt;div id="paginator"&gt;
                  {#if pageInfo}
                      {#if pageInfo.hasNextPage}
                          &lt;div class="btn" on:click={fetchMore}&gt;Next&lt;/div&gt;
                      {/if}
                  {/if}
              &lt;/div&gt;
          {:catch error}
              {console.log(error)}
          {/await}
      &lt;/div&gt;
  &lt;/ContentWrapper&gt;
  </code></pre>