[英]How to detect when a user scrolls to the bottom of a div - Vue
我目前正在尝试在我的网站上实现无限滚动,我正在使用 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');
}
})
});
我很感激一些帮助,谢谢。
您必须捕获 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。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.