언어 설정

Menu
Sites
Language
Getting infinite scroll to work (Solved)

Hello,

In our web app, our infinite scroll seems to be broken. Here is the basic setup of code that we use:

Scroll event listener:

//Set up a scroll timer to check for when we might need to get new data

var self = this;

$(window).scroll(function () {

    if ( self.scrollTimer ) {

        clearTimeout(self.scrollTimer);

    }

    self.scrollTimer = setTimeout(function() {

        self.scrollCheck();

    }, 50);

});
 
The actual function that is called when the scroll event happens:
scrollCheck: function() {

    // do not fetch if stream does not exist

    if($('#stream').length == 0)

    return;

    var scrollSelectedId = 'html';

    var pageHeight = $("#stream").height();

    var scrollHeight = $(scrollSelectedId).scrollTop();

    var allowableOffset = $(window).height();

    if(pageHeight - allowableOffset < scrollHeight) {

        Stream.getMoreMedia();

    }

}
 
I'm wondering if page height and scroll height need to be handled differently inside of the Tizen web app? Just to clarify one thing #stream is the id of our content div where we load all of our content into. We initially load this with 10 items, and then as the user scrolls down we continue to load in 10 more items each time. The problem currently is it never seems to load new content in.
Edited by: Brock Boland on 17 3월, 2014 Reason: Paragraph tags added automatically from tizen_format_fix module.

Responses

7 댓글
Raghu Kona
Thanks for posting, we are looking into this
Jasper Valero
Thanks Raghu! We appreciate any help you can offer.
Lakshmi Grandhi
I tried your code, i didn't receive scroll event for window, i tried creating a div element inside content and applied changes it worked $('#target').scroll(function() { $('#target').append('Handler for .scroll() called.'); }); Please let me know, if you need more information to resolve your issue Thanks Lakshmi
Jasper Valero
Using jQuery .scroll() on a div is great and pretty straightforward. Although it doesn't solve my problem. In the example code I posted you'll see where I'm using the overall "window" height with and offset and scroll position to determine when the user is close to the bottom. This allows us to load content prior without them having to hit the bottom of the stream and wait a long time. What would the equivalent of the window object be in a web app? I think that would be a good place to start for me.
Marco Buettner
Instead window you can try document
Jasper Valero
That was actually the first thing I tried as it is normally the stand in for the window object on mobile devices. Unfortunately it doesn't work either. Appreciate the suggestion though.
Jasper Valero
Actually the $( document ).scroll() function did work. I had to run a Project > Clean for something else. And when I redeployed to the test device it was working. I think something was getting hung up in the build step.