javascript - VueJS指令计算div是否滚动到底部

我正在尝试发出一个小指令，如果div当前滚动到底部，它将使div滚动到底部，但是如果用户向上滚动，则不会滚动到底部，但是如果向后滚动，它将继续向下滚动到底，这是我到目前为止所拥有的代码

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
  }
});

这是我从控制台日志中得到的

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

如果我一直滚动到最底端，我能得到的最接近的是295，则它开始于
251 251.1875，但是一旦溢出开始并开始滚动，它似乎就保持在295，这是我能回到的最接近的251。

我得到了计算

Detecting when user scrolls to bottom of div with jQuery

最佳答案

如果您想在Vue 2中更简单一些，请添加以下方法:

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
            }
        }
    },

然后，在要滚动的元素上，添加一个事件侦听器:

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