Vertical infinite scroll

by tenold

HTML

<html lang="en-US"
	itemscope 
	itemtype="http://schema.org/WebSite" 
	prefix="og: http://ogp.me/ns#" >
<body>
  <div id="feed">
    <div class="sections">
    </div>
    <script class="section-curated-template" type="text/template">
        <section><img src="https://via.placeholder.com/500"></section>
        <section><img src="https://via.placeholder.com/600"></section>
        <section><img src="https://via.placeholder.com/700"></section>
        <section><img src="https://via.placeholder.com/800"></section>
        <section><img src="https://via.placeholder.com/900"></section>      
    </script>
  </div>
</body>
</html>

JavaScript

(function($){
  // Make sure we can push to GA

  $(document).ready(function(){
/* Breakpoints
-------------------------- */
var bp = {
  xl: 300.0,
  l: 300.0,
  m: 300.0,
  s: 300.0,
  xs: 300.0
};
/*===================================================

          + PAGE

      ===================================================*/

      var page = {
        goingDown: false,
        stopScrolling: false,
        startScrollTimer: null,
        prevScroll: null,
        newScroll: null,
        scrollSpeed: 1,
        scrollInterval: 30
      };

      page.autoScroll = function() {
        if (!page.stopScrolling) {
          if (page.goingDown) {
            window.scrollBy(0, -page.scrollSpeed);
          } else {
            window.scrollBy(0, page.scrollSpeed);
          }
        }
      };

      page.watchScroll = function() {
        var scrollTop = $(window).scrollTop();

        page.autoScroll();
        // Stop automatic scroll when user is scrolling, and change direction if need be.
        // Adding/subtracting an extra 2 pixels for padding to prevent false positive on scroll.
        if (page.prevScroll + 2 < scrollTop || page.prevScroll - 2 > scrollTop) {
          page.stopScrolling = true;
          clearTimeout(page.startScrollTimer);
          page.startScrollTimer = setTimeout(function() {
            page.stopScrolling = false;
          }, 50);
          if (page.prevScroll + 30 < scrollTop) {
            page.goingDown = false;
          }
          if (page.prevScroll - 30 > scrollTop) {
            page.goingDown = true;
          }
        }
        page.prevScroll = scrollTop;
      };

      /*===================================================

          + FEED

      ===================================================*/

      var feed = {
        sectionCount: 10,
        appendCount: 0,
        currentName: 'curated',
        isLoadingSection: false
      };

      // DOM elements
      feed.el = {
        feed: $("#feed"),
     ...