VueJS directive calculate if div is scrolled to the bottom

Question

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

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 >= $(el).outerHeight()) {
      // scroll to bottom
    }

    // Leave the scroller alone
  }
});

This is what I get from the console log

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

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

251 251.1875 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.

I got the calculation from

Detecting when user scrolls to bottom of div with jQuery

Answer 1

If you want something a little simpler in Vue 2, add this method:

scrolledToBottom(event){
        var el = event.srcElement
        console.log(el.scrollTop + " " + el.scrollHeight + " " + el.clientHeight)
        if(!this.reachedBottom){
            if(el.scrollTop >= (el.scrollHeight - el.clientHeight)-100){
                this.reachedBottom = true
            }
        } 
    },

Then, on the element that's being scrolled, add an event listener:

<div @scroll="scrolledToBottom" style="overflow:scroll; max-height:500px;">
<!--content-->
</div>