vue.js - 如何使用 vue.js 检测 div 内的滚动像素

Question

我正在使用 vue.js 创建一个应用程序。现在我需要检测 div 元素中的滚动像素。当它到达元素的底部时，会发生一个事件，相反，当它从元素的底部再上升一个像素时，另一个事件将发生。

使用 jQuery，代码看起来像这样：

$('div.chat-content').on('scroll', function() {
    if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
        //First event 
    } else {
        //Second event
    }
});    

如何使用 vue.js 实现相同的结果？

标签： vue.js

Answer 1

您可以使用ref匹配元素并在 Vue 中获取它们，然后您只需通过简单的 JS 使用它们。
如何使用ref-在这里。
如何收听事件 -在这里。

const el = this.$refs.matched;

scrollEvent() {
    if (el.scrollTop + el.innerHeight >= el.scrollHeight) {
       // first event
    } else {
       // second event
    }
}