gpt4 book ai didi

javascript - jquery向下滚动时如何获取浏览器屏幕窗口的位置

转载 作者:太空宇宙 更新时间:2023-11-04 09:56:49 25 4
gpt4 key购买 nike

这是当用户滚动到网站底部时从数据库查询数据的脚本但我想在等于浏览器底部的箭头栏之前查询数据。我想在用户滚动到 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);
});

enter image description here

最佳答案

这应该有效。如果您想要“无限滚动”效果,则必须重置 triggerFlag,并重新更新 docHeighttriggerHeight 值每当您的 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com