VueJS directive calculate if div is scrolled to the bottom
<p>I'm trying to make a little directive that will keep the div scrolled to the bottom if the div is currently scrolled to the bottom, but will not scroll to the bottom if the user scrolls up, but will continue to scroll down if scrolled back to the bottom, this is the bit of code I have so far</p>

<pre><code>Vue.directive('scroller', {
  bind: function(el, bindings, vnode) {
  },
  componentUpdated: function(el, bindings, vnode) {
    console.log(el.scrollHeight - el.scrollTop, $(el).outerHeight())
    if (el.scrollHeight - el.scrollTop &gt;= $(el).outerHeight()) {
      // scroll to bottom
    }

    // Leave the scroller alone
  }
});
</code></pre>

<p>This is what I get from the console log</p>

<pre><code>bundle.js:8237 295 251.1875
bundle.js:8237 339 251.1875
bundle.js:8237 383 251.1875
bundle.js:8237 427 251.1875
bundle.js:8237 295 251.1875
</code></pre>

<p>if I scroll all the way to the bottom the closest I can get is 295, it starts off at </p>

<p><code>251 251.1875</code> but as soon as the overflow begins and it starts to scroll, it seems to stay at 295 being the closest I can get back to 251.</p>

<p>I got the calculation from </p>

<p><a href="https://stackoverflow.com/questions/6271237/detecting-when-user-scrolls-to-bottom-of-div-with-jquery">Detecting when user scrolls to bottom of div with jQuery</a></p>