Javascript 如何检测用户何时滚动到div-Vue的底部
我目前正在尝试在我的网站上实现无限滚动,我使用的是Vue框架。Vue有几个无限加载库,但是在集成它们之后,它们有一些问题对我来说太严重了 我已经有了它,所以一旦满足某个条件,我就可以向数组中添加更多数据,我只需要能够检测何时到达/向下滚动到div的底部 我确实需要将它与Vue中的for循环集成在一起,尽管它似乎不适用于一些常见的解决方案。这就是我的代码的本质 展示物品 当用户向下滚动到容器底部时,我将如何进行检测? 我在没有Vue的情况下尝试过,但一旦我添加了Vue,它似乎就不起作用了: jQueryfunction${ $“容器”。在“滚动”上,函数{ 如果$this.scrollTop+$this.innerHeight>=$this[0]。scrollHeight{ 警报“到达终点”; } } };Javascript 如何检测用户何时滚动到div-Vue的底部,javascript,html,vue.js,Javascript,Html,Vue.js,我目前正在尝试在我的网站上实现无限滚动,我使用的是Vue框架。Vue有几个无限加载库,但是在集成它们之后,它们有一些问题对我来说太严重了 我已经有了它,所以一旦满足某个条件,我就可以向数组中添加更多数据,我只需要能够检测何时到达/向下滚动到div的底部 我确实需要将它与Vue中的for循环集成在一起,尽管它似乎不适用于一些常见的解决方案。这就是我的代码的本质 展示物品 当用户向下滚动到容器底部时,我将如何进行检测? 我在没有Vue的情况下尝试过,但一旦我添加了Vue,它似乎就不起作用了: jQu
非常感谢您的帮助。如果您不介意添加新的依赖项,可以使用此NPM软件包[Vue Infinite Scroll][1]完成此操作 您还可以在此代码笔中看到工作示例:
查看此项了解更多说明如果您不介意添加新的依赖项,您可以使用此NPM软件包[Vue Infinite Scroll][1]完成此操作 您还可以在此代码笔中看到工作示例: 查看此项了解更多解释,请参见 您必须捕获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。归功于
您必须捕获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、Chrome Edge和Firefox。您正在将两种不同的框架混合在一起,即jQuery和Vue。互联网上有很多关于如何只在Vue中实现无限滚动的例子,比如:我明白了,我认为实现这样的小东西并不困难。不过我最终还是让vue无限加载开始工作了,所以谢谢。您将两个不同的框架混合在了jQuery和vue中。互联网上有很多关于如何只在Vue中实现无限滚动的例子,比如:我明白了,我认为实现这样的小东西并不困难。不过,我最终还是让vue infinite loading正常工作了,所以谢谢。这实际上是我开始使用的,但似乎几年内没有人更新过该软件包。我遇到了一些bug,很多人都在抱怨。不过谢谢你。这实际上是我开始的,但似乎几年内没有人更新过这个软件包。我遇到了一些bug,很多人都在抱怨。谢谢你。