这是当用户滚动到网站底部时从数据库查询数据的脚本 但我想在等于浏览器底部的箭头栏之前查询数据。 我想在用户滚动到 2/3 或接近浏览器底部而不是浏览器底部时查询数据或加载 ajax
$(document).ready(function () {
var lastScrollTop = 0;
document.addEventListener("scroll", function() { // or window.addEventListener("scroll"....
var st = window.pageYOffset || document.documentElement.scrollTop;
if (st > lastScrollTop) {
if ($(window).scrollTop() + $(window).height() === $(document).height()) {
$.ajax({
url:'products/scroll',
method:'get',
dataType:'html',
data:{},
success : function (data, status) {
console.log(data);
$(data).appendTo('.load-more-block')
}
})
}
}
lastScrollTop = st;
}, false);
});
最佳答案
这应该有效。如果您想要“无限滚动”效果，则必须重置 triggerFlag，并重新更新 docHeight 和 triggerHeight 值每当您的 DOM 使用来自 ajax 请求的新值更新时，无论新文档高度是多少。
$(document).ready(function(){
var docHeight = $(document).height();
var triggerHeight = docHeight*0.6667;
$("#docHeight").text(docHeight); //Ignore
$("#triggerHeight").text(triggerHeight); //Ignore
var triggerFlag = false;
$(window).scroll(function(){
$("#height").text($(this).scrollTop()); //Ignore
if (!triggerFlag && $(this).scrollTop() > triggerHeight){
//Execute code here
triggerFlag = true;
$("#status").text("Executed at " + new Date());
}
});
});html{
height: 6000px;
}
p{
position: fixed;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<p>
Current Height: <span id='height'>0</span><br>
Window Height: <span id='docHeight'>0</span><br>
Trigger Height: <span id='triggerHeight'>0</span><br>
Status: <span id='status'>false</span>
</p>
</body>
</html>关于javascript - jquery向下滚动时如何获取浏览器屏幕窗口的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38643364/