On scroll load data on demand

Question

I am implementing on demand loading of data through scrolling.

I have register the function in document.ready for a div.

The data should only be populated once the scroll is reached to the last. so to identify whether the scroll has reached till the last i am using the below function.

$("#tree").scroll(function () {
                if (isScrolledToBottom(this)) {
                    
                }
            });

But the function is not returning the correct value. What I mean is it should return the a true value when scroll has reached to its last.

function isScrolledToBottom(object) {
            return ($(object).attr('scrollHeight') - $(object).scrollTop() - 1) <= $(object).height();
        };

I'm sure, there's a solution already for that. Google for `infinite ajax scrolling` — kirilloid, Mar 12 '12 at 10:02

score 1 · Accepted Answer · answered Mar 12 '12 at 10:04

1

Try this instead :

return ($(object).attr('offsetHeight') + $(object).attr('scrollTop') >= $(object).attr('scrollHeight'));

answered Mar 12 '12 at 10:04

Alytrem

2,620
1
12
13

score 1 · Answer 2 · edited May 23 '17 at 12:09

1

If you want to do infinite scrolling, check out my answer here: How to load the web page content based on user scrolling

This demo is triggered at a certain Y scroll position. If you are looking to accomplish this specifically when a user reaches a certain item, you might want to look at the Waypoints plugin.

http://imakewebthings.com/jquery-waypoints/

Infinite scroll Demo: http://imakewebthings.com/jquery-waypoints/infinite-scroll/

$('.theItems:last').waypoint(function(event, direction) {
    //Ajax fetch here
});

edited May 23 '17 at 12:09

Community

1
1

answered Mar 12 '12 at 10:06

Dutchie432

28,798
20
92
109

Well, I believe the concept itself is a bit confusing to those to who don't grasp it. What don't you understand? – Dutchie432 May 03 '12 at 12:44
I was looking for the js that controls your infinite code example to understand how content was actually loaded and where into, just noticed it at the bottom of the page so that helps. – Dan May 03 '12 at 12:48

score 0 · Answer 3 · answered Feb 17 '17 at 12:22

 var scrollHeight = $(object).prop("scrollHeight"); // total scrollable height of the element 
    var scrollTop = $(object).scrollTop(); // how far you have come from the top while scrolling vertically
    var height =  $(object).height(); // the constant height of the portion in display at all times

    if (scrollHeight === (scrollTop + height)) {
        //console.log("fetching page");
        fetchNextPage();
    }

On scroll load data on demand

3 Answers3