我正在创建一个分页系统(有点像Facebook),当用户滚动到底部时,内容会加载.我想最好的方法是找到用户位于页面底部并运行ajax查询以加载更多帖子.
唯一的问题是我不知道如何检查用户是否已使用jQuery滚动到页面底部.有任何想法吗？
我需要找到一种方法来检查用户何时使用jQuery滚动到页面底部.
我有一个div框(称为flux),里面有不同数量的内容.此divbox的溢出设置为auto.
现在,我想要做的是,当使用滚动到这个DIV框的底部,加载更多的内容到页面,我知道如何做到这一点(加载内容)但我不知道如何检测用户何时滚动到div标签的底部？如果我想在整个页面上执行此操作,我会使用.scrollTop并从.height中减去它.
但我似乎无法在这做到这一点？
我尝试从flux中获取.scrollTop,然后将所有内容包装在一个名为inner的div中,但是如果我使用innerHeight of flux它返回564px(div设置为500作为高度)和'innner'的高度它返回1064,而在div底部的scrolltop表示564.
我能做什么？
我需要检测用户是否滚动到页面底部.如果它们位于页面底部,当我向底部添加新内容时,我会自动将它们滚动到新的底部.如果他们不在底部,他们正在阅读页面上较高的先前内容,所以我不想自动滚动它们,因为他们想要留在原地.
如何检测用户是否滚动到页面底部或是否在页面上滚动更高？
backtotop仅当用户滚动底部 > 250 时才需要显示按钮。我该怎么做？
我的代码：
<template>
<div>
<button v-if="checkScroll" class="goTop" @click="backToTop">
<i class="fa fa-angle-up" aria-hidden="true"></i>
</button>
</div>
</template>
<script>
export default {
methods: {
computed: {
checkScroll() {
if ($(document).scrollTop() > 250) {
return true;
} else {
return false;
}
}
},
backToTop() {
this.$scrollTo('html');
},
}
}
</script>
我的代码不起作用。我不明白的错误。按钮被隐藏。
我试图在用户向下滚动并到达页面底部时触发一个事件。
我在互联网上搜索并在 stackoverflow 中找到了一些帖子，但出乎意料的是，答案对我不起作用。
例如：检查用户是否滚动到底部
使用上述 SO 帖子给出的答案，我尝试触发的事件在到达页面顶部而不是底部时执行。
如果我出错了，请告诉我：
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
loadmore();
}
});
function loadmore(){
var lastProd = $('.product_div').last();
var lastProdID = $('.product_div').last().prop('id');
//console.info(lastProdID); return false;
//var val = document.getElementById("row_no").value;
$.ajax({
type: 'post',
url: 'includes/load_products.php',
data: { getresult:lastProdID },
success: function (response) {
console.log(response);
//var content = document.getElementById("all_rows");
//content.innerHTML = content.innerHTML+response;
lastProd.after(response);
// We increase the value by 10 because we limit the results by 10
// document.getElementById("row_no").value = Number(val)+10;
}
}); …