title: How to detect when a user scrolls to the bottom of a div - Vue
body: <p>I'm currently trying to implement infinite scrolling on my website, I'm using Vue Framework. There are a few infinite loading libraries for Vue but after integrating them, they had a few issues that were too major for me.</p>
  
  <p>I already have it so I can add more data into an array once a certain condition is met, I just need to be able to detect when the bottom of a div is reached/scrolled down to.</p>
  
  <p>I do need to integrate this with a for loop in Vue though which seems to not work with some common solutions. This is essentially what my code looks like.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="container"&gt;
      &lt;div v-for="object in objects"&gt;
          &lt;div class="class123"&gt;
              &lt;p&gt;Display Stuff&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How would I go about detecting when a user scrolls down to the bottom of container?
  I tried and it worked without Vue but once I add Vue in, it doesn't seem to work:</p>
  
  <pre class="lang-js prettyprint-override"><code>jQuery(function($) {
      $('#container').on('scroll', function() {
          if($(this).scrollTop() + $(this).innerHeight() &gt;= $(this)[0].scrollHeight) {
              alert('end reached');
          }
      })
  });
  </code></pre>
  
  <p>I'd appreciate some help, thank you.</p>