title: infinite gallery with detecting scroll
body: <p>So I am trying to create <strong>simple</strong> auto scroll gallery with the possibility of changing direction(up and down)</p>
  <p>I can't understand why when &quot;auto scroll&quot; reaches the top of the page stuck. Same thing happens when it reaches to bottom.</p>
  <p>Here is my example: <a href="https://infinite-scroll-gallery.tesladesignstudio.com/" rel="nofollow noreferrer">https://infinite-scroll-gallery.tesladesignstudio.com/</a></p>
  <pre><code> let target = 1;
      let reverse = false;
  
      function scroll(){
  
      target = window.scrollY;
      if(target &lt;= 0){
          target = (content.offsetHeight / 2) - 10;
          window.scrollTo(0, target);
          document.getElementById(&quot;scrollLoct&quot;).innerHTML = &quot;target UP&quot;;
      }else if( target &gt;= content.offsetHeight / 2){
          target = 10;
          window.scrollTo(0, target);
          document.getElementById(&quot;scrollLoct&quot;).innerHTML = &quot;target DOWN&quot;;
      }
  
      if(reverse){
          target --
      }else{
          target++
      }
      window.scrollTo(0, target)
      scrollable.style.transform = `translateY(-${target}px)`;
      requestAnimationFrame(scroll)
      
  }
  scroll();
  
  function scrollDetect(){
      var lastScroll = 0;
    
      window.onscroll = function() {
  
          let currentScroll = document.documentElement.scrollTop || document.body.scrollTop; // Get Current Scroll Value
    
          if (currentScroll &gt; 0 &amp;&amp; lastScroll &lt;= currentScroll){
            reverse = false;
            lastScroll = currentScroll;
            document.getElementById(&quot;scrollLoc&quot;).innerHTML = &quot;Scrolling DOWN&quot;;
          }else{
            reverse = true;
            lastScroll = currentScroll;
            document.getElementById(&quot;scrollLoc&quot;).innerHTML = &quot;Scrolling UP&quot;;
          }
      };
      
  }
  scrollDetect()
  </code></pre>