lorenzofox3 / lrInfiniteScroll

directive to register handler when an element is scrolled down near its end http://lorenzofox3.github.io/lrInfiniteScroll/index.html
217 stars 46 forks source link

Supporting full page scrolling. #11

Open SimeonC opened 9 years ago

SimeonC commented 9 years ago

I needed for my app to support full page scrolling so I've modified your directive to support "target" attribute. (Sorry I don't have time to do a PR). The following code supports both scrolling an element other than the current one (if you use routes and need to target a parent) and the special case of the whole page scrolling - 'window'.

Full code is in this gist: https://gist.github.com/SimeonC/a15055a5b9ec0c5685da. Highlights below:

Inserted at Line 12:

bindTarget = element,
calculateRemaining = function(){
    return element[0].scrollHeight - (element[0].clientHeight + element[0].scrollTop);
};

if (attr.target) {
    if (attr.target.toLowerCase() === 'window') {
        bindTarget = angular.element(window);
        element = angular.element(document.querySelector('body'))
        calculateRemaining = function(){
            return element[0].offsetHeight - (window.pageYOffset + window.innerHeight);
        };
    }
    else element = angular.element(document.querySelector(attr.target));
}

Line 35:

bindTarget.bind(
    'scroll', function () {
        var remaining = calculateRemaining();
        //if we have reached the threshold and we scroll down
joelcdoyle commented 8 years ago

I would also love to be able to listen to the full page scroll position. However, this method doesn't work so well when using the angular routing features. Each time you navigate away and then back to the route that contains the infinite scroll directive, a new scope is created for the directive resulting in multiple listeners calling your handler. I'm not sure if this is a symptom of lrInfiniteScroll, itself or this gist.