Angular Js infinite scroll with fixed header

Question

I want to implement the Infinite scroll for tables with fixed header and also first column need to be fixed .

I tried to implement the same using Angular JS Infinite scroll directive . I am able to achieve the Infinite scroll but am not able to fix header and column inside the div.

I've attached a link to my fiddle below.

http://jsfiddle.net/jayasant1907/5yxa3xyg/

Javascript :

var myApp = angular.module('myApp', [
    'infinite-scroll'])
    .controller('MyCtrl', function ($scope) {
    $scope.items = [];
    for (i = 0; i < 5000; ++i) {
        $scope.items.push({
            number: i
        });
    }
    $scope.barLimit = 100;
    $scope.increaseLimit = function () {
        $scope.barLimit += 50;
        console.log('Increase Bar Limit', $scope.barLimit)
    }
});

/* ng-infinite-scroll - v1.2.0 - 2015-02-14 */
var mod;

mod = angular.module('infinite-scroll', []);

mod.value('THROTTLE_MILLISECONDS', null);

mod.directive('infiniteScroll', [
    '$rootScope', '$window', '$interval', 'THROTTLE_MILLISECONDS', function ($rootScope, $window, $interval, THROTTLE_MILLISECONDS) {
    return {
        scope: {
            infiniteScroll: '&',
            infiniteScrollContainer: '=',
            infiniteScrollDistance: '=',
            infiniteScrollDisabled: '=',
            infiniteScrollUseDocumentBottom: '=',
            infiniteScrollListenForEvent: '@'
        },
        link: function (scope, elem, attrs) {
            var changeContainer, checkWhenEnabled, container, handleInfiniteScrollContainer, handleInfiniteScrollDisabled, handleInfiniteScrollDistance, handleInfiniteScrollUseDocumentBottom, handler, height, immediateCheck, offsetTop, pageYOffset, scrollDistance, scrollEnabled, throttle, unregisterEventListener, useDocumentBottom, windowElement;
            windowElement = angular.element($window);
            scrollDistance = null;
            scrollEnabled = null;
            checkWhenEnabled = null;
            container = null;
            immediateCheck = true;
            useDocumentBottom = false;
            unregisterEventListener = null;
            height = function (elem) {
                elem = elem[0] || elem;
                if (isNaN(elem.offsetHeight)) {
                    return elem.document.documentElement.clientHeight;
                } else {
                    return elem.offsetHeight;
                }
            };
            offsetTop = function (elem) {
                if (!elem[0].getBoundingClientRect || elem.css('none')) {
                    return;
                }
                return elem[0].getBoundingClientRect().top + pageYOffset(elem);
            };
            pageYOffset = function (elem) {
                elem = elem[0] || elem;
                if (isNaN(window.pageYOffset)) {
                    return elem.document.documentElement.scrollTop;
                } else {
                    return elem.ownerDocument.defaultView.pageYOffset;
                }
            };
            handler = function () {
                var containerBottom, containerTopOffset, elementBottom, remaining, shouldScroll;
                if (container === windowElement) {
                    containerBottom = height(container) + pageYOffset(container[0].document.documentElement);
                    elementBottom = offsetTop(elem) + height(elem);
                } else {
                    containerBottom = height(container);
                    containerTopOffset = 0;
                    if (offsetTop(container) !== void 0) {
                        containerTopOffset = offsetTop(container);
                    }
                    elementBottom = offsetTop(elem) - containerTopOffset + height(elem);
                }
                if (useDocumentBottom) {
                    elementBottom = height((elem[0].ownerDocument || elem[0].document).documentElement);
                }
                remaining = elementBottom - containerBottom;
                shouldScroll = remaining <= height(container) * scrollDistance + 1;
                if (shouldScroll) {
                    checkWhenEnabled = true;
                    if (scrollEnabled) {
                        if (scope.$$phase || $rootScope.$$phase) {
                            return scope.infiniteScroll();
                        } else {
                            return scope.$apply(scope.infiniteScroll);
                        }
                    }
                } else {
                    return checkWhenEnabled = false;
                }
            };
            throttle = function (func, wait) {
                var later, previous, timeout;
                timeout = null;
                previous = 0;
                later = function () {
                    var context;
                    previous = new Date().getTime();
                    $interval.cancel(timeout);
                    timeout = null;
                    func.call();
                    return context = null;
                };
                return function () {
                    var now, remaining;
                    now = new Date().getTime();
                    remaining = wait - (now - previous);
                    if (remaining <= 0) {
                        clearTimeout(timeout);
                        $interval.cancel(timeout);
                        timeout = null;
                        previous = now;
                        return func.call();
                    } else {
                        if (!timeout) {
                            return timeout = $interval(later, remaining, 1);
                        }
                    }
                };
            };
            if (THROTTLE_MILLISECONDS != null) {
                handler = throttle(handler, THROTTLE_MILLISECONDS);
            }
            scope.$on('$destroy', function () {
                container.unbind('scroll', handler);
                if (unregisterEventListener != null) {
                    unregisterEventListener();
                    return unregisterEventListener = null;
                }
            });
            handleInfiniteScrollDistance = function (v) {
                return scrollDistance = parseFloat(v) || 0;
            };
            scope.$watch('infiniteScrollDistance', handleInfiniteScrollDistance);
            handleInfiniteScrollDistance(scope.infiniteScrollDistance);
            handleInfiniteScrollDisabled = function (v) {
                scrollEnabled = !v;
                if (scrollEnabled && checkWhenEnabled) {
                    checkWhenEnabled = false;
                    return handler();
                }
            };
            scope.$watch('infiniteScrollDisabled', handleInfiniteScrollDisabled);
            handleInfiniteScrollDisabled(scope.infiniteScrollDisabled);
            handleInfiniteScrollUseDocumentBottom = function (v) {
                return useDocumentBottom = v;
            };
            scope.$watch('infiniteScrollUseDocumentBottom', handleInfiniteScrollUseDocumentBottom);
            handleInfiniteScrollUseDocumentBottom(scope.infiniteScrollUseDocumentBottom);
            changeContainer = function (newContainer) {
                if (container != null) {
                    container.unbind('scroll', handler);
                }
                container = newContainer;
                if (newContainer != null) {
                    return container.bind('scroll', handler);
                }
            };
            changeContainer(windowElement);
            if (scope.infiniteScrollListenForEvent) {
                unregisterEventListener = $rootScope.$on(scope.infiniteScrollListenForEvent, handler);
            }
            handleInfiniteScrollContainer = function (newContainer) {
                if ((newContainer == null) || newContainer.length === 0) {
                    return;
                }
                if (newContainer instanceof HTMLElement) {
                    newContainer = angular.element(newContainer);
                } else if (typeof newContainer.append === 'function') {
                    newContainer = angular.element(newContainer[newContainer.length - 1]);
                } else if (typeof newContainer === 'string') {
                    newContainer = angular.element(document.querySelector(newContainer));
                }
                if (newContainer != null) {
                    return changeContainer(newContainer);
                } else {
                    throw new Exception("invalid infinite-scroll-container attribute.");
                }
            };
            scope.$watch('infiniteScrollContainer', handleInfiniteScrollContainer);
            handleInfiniteScrollContainer(scope.infiniteScrollContainer || []);
            if (attrs.infiniteScrollParent != null) {
                changeContainer(angular.element(elem.parent()));
            }
            if (attrs.infiniteScrollImmediateCheck != null) {
                immediateCheck = scope.$eval(attrs.infiniteScrollImmediateCheck);
            }
            return $interval((function () {
                if (immediateCheck) {
                    return handler();
                }
            }), 0, 1);
        }
    };
}]);

developthewebz · Accepted Answer · 2016-02-02 21:01:14Z

2

Something like this? You'll need a container around your tables for the absolute positioning to work for each.

.constrained {
    height:300px;
    width: 300px;
    overflow-y:scroll;
}

.constrained thead {
  position: absolute;
  width: 300px;
  top: 0;
  left: 0;
}
th {
  width: 100px;
}
td {
  width: 100px;
}

http://jsfiddle.net/wxyhqf23/2/

edited Feb 2, 2016 at 21:01

answered Feb 2, 2016 at 19:04

developthewebz

1,9773 gold badges19 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Santhosh Kumar Over a year ago

My bad, I have multiple tables inside the page so i cant keep top:0 . Updated the fiddler jsfiddle.net/jayasant1907/wxyhqf23

developthewebz Over a year ago

@SanthoshKumar See my updated Plunkr. Instead of using position: fixed, use position: absolute. Make sure you have a relative container around your constrained div.

Collectives™ on Stack Overflow

Angular Js infinite scroll with fixed header

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related