如何检测用户何时滚动到 div 的底部 - Vue答案

【问题标题】：How to detect when a user scrolls to the bottom of a div - Vue如何检测用户何时滚动到 div 的底部 - Vue
【发布时间】：2020-01-05 19:13:59
【问题描述】：

我目前正在尝试在我的网站上实现无限滚动，我正在使用 Vue 框架。 Vue 有一些无限加载库，但是在集成它们之后，它们有一些对我来说太重要的问题。

我已经有了它，因此一旦满足某个条件，我就可以将更多数据添加到数组中，我只需要能够检测何时到达/向下滚动到 div 的底部。

我确实需要将它与 Vue 中的 for 循环集成，但它似乎不适用于一些常见的解决方案。这基本上就是我的代码的样子。

<div id="container">
    <div v-for="object in objects">
        <div class="class123">
            <p>Display Stuff</p>
        </div>
    </div>
</div>

我将如何检测用户何时向下滚动到容器底部？我试过了，它在没有 Vue 的情况下也可以工作，但是一旦我添加了 Vue，它似乎就不起作用了：

jQuery(function($) {
    $('#container').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('end reached');
        }
    })
});

非常感谢您的帮助，谢谢。

【问题讨论】：

您将两个不同的框架混合在一起 jQuery 和 Vue。网上有很多关于如何仅在 Vue 中实现无限滚动的示例，例如：medium.com/@rafaelogic/…
我明白了，我认为实现这样的小东西并不难。我确实最终让 vue-infinite-loading 工作了，所以谢谢。
不要混合使用 vue 和 jquery，因为 JQ 直接操作 DOM 而 vue 使用虚拟 dom

标签： javascript html vue.js

【解决方案1】：

归功于Phan An。

你必须捕获 div 本身的滚动事件并将它绑定到一个计算滚动位置并确定是否在底部滚动的方法。使用普通的 Vue：

<template>
  <div @scroll="onScroll"></div>
</template>

<script>
export default function () {
  methods: {
    onScroll ({ target: { scrollTop, clientHeight, scrollHeight }}) {
      if (scrollTop + clientHeight >= scrollHeight) {
        this.loadMorePosts()
      }
    }
  }
}
</script>

截至发布日期，正在使用最新版本的 Chrome、Chromium Edge 和 Firefox。

【讨论】：

【解决方案2】：

如果您不介意添加新的依赖项，可以使用此 NPM 包 [Vue Infinite Scroll][1] 来实现。

您还可以在此 CodePen 中查看工作示例：https://codepen.io/fayazara/pen/PLmRLz

查看Medium article 了解更多说明

【讨论】：

这实际上是我开始的，但似乎没有人在几年内更新包。我遇到了一些错误，很多人都在抱怨。不过谢谢。