1

First of all please don't mark it as duplicate question because I have seen all the questions regarding this topic and tried all the solutions but none of them helped me.Here is my JSP page:

<!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>

I was trying to make facebook like scroll for showing more features as soon as user scrolls to half of the page.The above function 

  $(window).scroll(function () {
 if ($(window).scrollTop() >= ($(document).height()-250) - ($(window).height())) {
  more_options();

is working well in Chrome but when i run this page in Mozilla Firefox it repeatedly calls the more_options function and shows irrelevant output.Actually the more_options function show here is demo with alert int it but actually I am using AJAX in that function and fetching more results from database.Chrome Shows the actual result but Mozilla shows unexpected result and repeat the entries come from AJAX call.

Here is Jsfiddle.

NoobEditor
  • 15,563
  • 19
  • 81
  • 112
Fresher
  • 894
  • 1
  • 7
  • 27
  • 2
    Mousewheel scrolling is implemented a bit differently in Chrome and FF. If you'll drag the scrollbar, both browsers behave the same way. Use `console.log` instead of `alert`, you'll get [the idea](http://jsfiddle.net/vbatg8v6/). – Teemu Aug 18 '14 at 10:09
  • @Teemu Thanks man if I am dragging then chrome and Mozilla gives the same result but wj=hen i am using mouse scroll then Mozilla doesn't give desired output.Could you provide any solution for Mousewheel scrolling – Fresher Aug 18 '14 at 10:13
  • You could use a [debouncer](http://stackoverflow.com/a/4298672/1169519), or a flag as karan3112 has suggested. – Teemu Aug 18 '14 at 10:14
  • @Teemu karan3112's solution not working.I will try debouncer though – Fresher Aug 18 '14 at 10:17

1 Answers1

1

This is because of the smooth scrolling of Mozilla. Use a boolean variable and add that in the condition.

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");
    }

Change the value of the flag to true after the ajax success event or when needed.

DEMO

karan3112
  • 1,867
  • 14
  • 20
  • Sorry mate your solution didn't work when I am using Mousewheel scrolling.If you could add fiddle for the solution.That would be great. – Fresher Aug 18 '14 at 10:16