Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 201
  • Last Modified:

jQuery Window Scrolling Issue

I have a page that initially loads 20 product. When the user hits the bottom of the page, it loads 20 more and appends it to the existing product results. Due to a problem with IE9 not performing this adequately, we decided to load more product when a user scrolls 25 pixels above the bottom of the page.

The problem is, if the user scrolls too slow, the even will fire multiple times and load 40, 60, 80, 120, even 160 product, depending on how many times the event fires. If they scroll fast, it typically works.

I think the event is firing too fast, and I'm not sure how to get the jQuery to do a single load only once if a user scrolls slowly.

I messed around with bind() and unbind() but couldn't get it to work quite right.

Does anyone have any thoughts on how to make this work (or have another solution entirely)?

    $(window).scroll(function () {
        var sum = $(window).scrollTop() + ($(window).height() * 1) + 25;
        var origDocHeight = $(document).height();
        var docHeight = $(document).height();


        // Load new data
        /////////////////////////////////////////////////
        if (sum >= docHeight) {

            // Loading product
            var thisURL = '/Products/moreResults.cfm?version=' + version;
            $.get(thisURL, {}, function (data) { $(".scrollContainer").append(data) })

        } // END IF
    });

Open in new window

0
infotechelg
Asked:
infotechelg
  • 2
1 Solution
 
Rainer JeschorCommented:
Hi,
just (an untested) quirk solution:
you store the size of the last load and add a fixed size in pixel which will normally take the space of 20 products. New products will only be loaded if the new position is greater than this sum.

var lastScrollEventPosition = 0;

$(window).scroll(function () {
        var sum = $(window).scrollTop() + ($(window).height() * 1) + 25;
        var origDocHeight = $(document).height();
        var docHeight = $(document).height();


        // Load new data
        /////////////////////////////////////////////////
        if (sum >= docHeight && sum>(lastScrollEventPosition+200)) {
            // Set the new position
           lastScrollEventPosition = sum;
            // Loading product
            var thisURL = '/Products/moreResults.cfm?version=' + version;
            $.get(thisURL, {}, function (data) { $(".scrollContainer").append(data) })

        } // END IF
    });

Open in new window

As I said, not tested but a possible quick good shot.
HTH
Rainer
0
 
infotechelgAuthor Commented:
Thanks Rainer, we'll give that a shot.
0
 
infotechelgAuthor Commented:
Brilliant! You're the man. That worked! Thanks a bunch.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now