(窗口).scrollTop()在Mozilla中滚动给出错误?

时间:2014-08-18 10:00:59

标签: javascript jquery

首先请不要将其标记为重复的问题,因为我已经看到了有关此主题的所有问题并尝试了所有解决方案,但它们都没有帮助我。这是我的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

1 个答案:

答案 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

DEMO