首先请不要将其标记为重复的问题,因为我已经看到了有关此主题的所有问题并尝试了所有解决方案,但它们都没有帮助我。这是我的JSP页面:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(window).scroll(function () {
if ($(window).scrollTop() >= ($(document).height()-250) - ($(window).height())) {
more_options();
}
});
function more_options()
{
alert("hii");
}
</script>
</head>
<body>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
</body>
</html>
当用户滚动到页面的一半时,我试图让facebook像滚动一样显示更多功能。上面的功能
$(window).scroll(function () {
if ($(window).scrollTop() >= ($(document).height()-250) - ($(window).height())) {
more_options();
在Chrome中运行良好,但是当我在Mozilla Firefox中运行此页面时,它会反复调用more_options函数并显示无关的输出。实际上,此处显示的more_options函数是带有alert int的demo,但实际上我在该函数中使用了AJAX从database.Chrome中获取更多结果显示实际结果,但Mozilla显示意外结果,并重复来自AJAX调用的条目。
这是Jsfiddle。
答案 0 :(得分:1)
这是因为Mozilla的流畅滚动。使用布尔变量并在条件中添加它。
JS:
var flag = true; //Global variable with default value True.
$(window).scroll(function () {
if ($(window).scrollTop() >= ($(document).height()-250) - ($(window).height()) && flag == true) {
more_options();
}
});
function more_options()
{
flag = false;
alert("hii");
}
在ajax成功事件之后或需要时将标志的值更改为true
。