Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Uncontrollable scrolling in div #24

Open
AlexCameron opened this issue May 7, 2012 · 8 comments
Open

Uncontrollable scrolling in div #24

AlexCameron opened this issue May 7, 2012 · 8 comments

Comments

@AlexCameron
Copy link

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
Copy link
Owner

fredwu commented May 15, 2012

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
Copy link
Author

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
Copy link
Author

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
Copy link
Owner

fredwu commented May 21, 2012

@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
Copy link

mylemans commented Oct 5, 2012

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
Copy link

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:

  1. 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?
  2. 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
Copy link

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

@dennislo
Copy link

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@fredwu @dennislo @ryanmaxwell @mylemans @AlexCameron @cis-sourabh