Angular Directive for Scroll Pagination

Angular Directive for Scroll Pagination

Before you add this to your "div" tag or any tag it you must add this style to that html element, but this not working with tables.

style="max-height: 100vh; overflow-y: scroll; width: 100%;"

create a JavaScript file for directive "scrollPagination .js"

var scrollPagination = function () {

    return {

        restrict: 'A',

        link: function (scope, element, attrs) {

            var raw = element[0];

            console.log('loading directive');

            element.bind('scroll', function () {

                console.log('in scroll');

                console.log(raw.scrollTop + raw.offsetHeight);

                console.log(raw.scrollHeight);

                if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {

                    console.log("I am at the bottom");

                    scope.$apply(attrs.inScroll);

                }

            });

        }

    };

};

module.exports = scrollPagination;

Example JavaScript File

require it in application.js

var scrollPagination = require('scrollPagination'); 

inside require give path to that scrollPagination.js file.

Example app.js File

add directive to angular module

app.directive('inScroll',[scrollPagination]);

you can use it in html 

<div in-scroll="function()"></div>

Get All Files..........