Uncontrollable scrolling in div

AlexCameron commented 12 years ago

Hey Fred,

Love the script, use it on multiple sites and it works like a charm.

I recently tried to use it in a div to make an endless playlist for my video player using ajax. Unfortunately I keep running into a problem with uncontrollable scrolling. I messed around with every setting but kept coming back to the same problem, the more I scrolled the more the scroll bar would shoot upwards, which you can see here:

http://filmroster.com/scrollproblem.php

When I remove ceaseFireOnEmpty, it works, but unfortunately only brings up one instance of new entries:

http://filmroster.com/scrollproblem2.php

Any ideas?

-Alex

fredwu commented 12 years ago

Hi Alex,

This might be a regression bug, could you please try v1.6.0 (https://github.com/fredwu/jquery-endless-scroll/tags) to see if it also has this problem?

AlexCameron commented 12 years ago

The scrolling div works perfectly with 1.6, thank you. Unfortunately that page also has an endless scroll applied to the whole window which no longer works.

The code I used for the window endless scroll is here, this code works on my other sites with version 1.3

I did of course change bottomPixels to inflowPixels when trying it with 1.6, I also tried changing $(document) to $(window)

        $(document).ready(function(){
            $(document).endlessScroll({
                bottomPixels: 150,
                fireDelay: 10,
              callback: function(p){

                  $.ajax({  
                   type: "post",  
                   data: {page : ++count},  
                   url: "/infinite_gen.php",     
                   dataType: "html",      
                   success: function(msg)  
                   {
                         $('#content').append(msg);         
                   }

                  }); 
              }
            });
        });

AlexCameron commented 12 years ago

Interesting, I noticed that the bottomPixels (in 1.6) doesn't work until after endlessScroll has been fired once. Before that, I have to scroll to the very bottom of the div before bottomPixel: 300 takes effect.

However, decreasing intervalFrequency down to 50 helped alleviate the "excessive scrolling" that would lead to scrolling the whole page instead of just the div.

fredwu commented 12 years ago

@AlexCameron Any chance you could send (ifredwu [at] gmail [dot] com) me a copy of your code to have a look at? If you could put together in minimal form that reproduces the issues you are having that'd be great.

mylemans commented 11 years ago

Any progress on this? I also have the same problem (with 1.8) shown at http://filmroster.com/scrollproblem.php

This problem is less problematic at firefox, but a real pain at Chrome :/

cis-sourabh commented 11 years ago

Hi Fred, I am using your plug-in its awesome but facing problem in v1.8 . I've used it on pop-up(data-reveal modal) for displaying the users but facing following problems:

When I open pop-up 1st time, ajax is called when reached the "inflowPixels" and "ceaseFireOnEmpty" is triggered. but when closed the pop-up and open it again plug-in stopped working on scrolling , can you explain me whats happening?
I've also facing the same problem "Uncontrollable scrolling in div" in pop-up despite using v1.6.

Please reply me if you have any solution regarding it!!

ryanmaxwell commented 11 years ago

1.6 scrolling in div is working for me too, 1.8 - no good.

dennislo commented 9 years ago

Hi @fredwu and others,

I just wanted to share this in case some one else is experiencing some strange jumpy behaviour or uncontrollable scrolling.

Version: v1.8.0

Issue: Page becomes jumpy and uncontrollable during scrolling. The cause I found out to be related to an empty lang="" HTML attribute.

Fix: Remove lang="" inside <!DOCTYPE html lang="">

Issue example: This is the endless scroll code, which worked fine on another HTML page:

    $(document).endlessScroll({
      fireDelay: 500,
      bottomPixels: 100,
      ceaseFireOnEmpty: false,  // Required to be false as 'callback' is used to create data instead of 'content'
      callback: function () {
        // Code removed, it made XHR calls for more JSON data to be appended to a JS array 
      }
    });

However, when I used it on another webpage (see below), it turned out to be the lang="" inside <!DOCTYPE html lang=""> to cause the jumpy and uncontrollable scrolling behaviour:

<!DOCTYPE html lang="">
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Content</title>

  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no">

</head>
<body>

  <script>
    $(document).endlessScroll({
      fireDelay: 500,
      bottomPixels: 100,
      ceaseFireOnEmpty: false,  // Required to be false as 'callback' is used to create data instead of 'content'
      callback: function () {
        // Code removed, it made XHR calls for more JSON data to be appended to a JS array 
      }
    });
  </script>

</body>
</html>

fredwu / jquery-endless-scroll

Uncontrollable scrolling in div #24