├── .gitignore ├── index.js ├── package.json ├── bower.json ├── lrInfiniteScroll.js └── readme.md /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | require('./lrInfiniteScroll'); 2 | module.exports = 'lrInfiniteScroll'; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lr-infinite-scroll", 3 | "version": "1.0.0", 4 | "description": "Directive to register handler when an element is scrolled down near its end", 5 | "browser": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/lorenzofox3/lrInfiniteScroll.git" 9 | }, 10 | "author": "", 11 | "license": "MIT", 12 | "bugs": { 13 | "url": "https://github.com/lorenzofox3/lrInfiniteScroll/issues" 14 | }, 15 | "homepage": "https://github.com/lorenzofox3/lrInfiniteScroll#readme" 16 | } 17 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lrInfiniteScroll", 3 | "main": "index.js", 4 | "version": "1.0.1", 5 | "homepage": "https://github.com/lorenzofox3/lrInfiniteScroll", 6 | "authors": [ 7 | "lorenzofox3 " 8 | ], 9 | "description": "angular directive to handle element scroll", 10 | "keywords": [ 11 | "angular", 12 | "scroll", 13 | "inifinite" 14 | ], 15 | "license": "MIT", 16 | "ignore": [ 17 | "**/.*", 18 | "node_modules", 19 | "bower_components", 20 | "test", 21 | "tests" 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /lrInfiniteScroll.js: -------------------------------------------------------------------------------- 1 | (function (ng) { 2 | 'use strict'; 3 | var module = ng.module('lrInfiniteScroll', []); 4 | 5 | module.directive('lrInfiniteScroll', ['$timeout', function (timeout) { 6 | return{ 7 | link: function (scope, element, attr) { 8 | var 9 | lengthThreshold = attr.scrollThreshold || 50, 10 | timeThreshold = attr.timeThreshold || 400, 11 | handler = scope.$eval(attr.lrInfiniteScroll), 12 | promise = null, 13 | lastRemaining = 9999; 14 | 15 | lengthThreshold = parseInt(lengthThreshold, 10); 16 | timeThreshold = parseInt(timeThreshold, 10); 17 | 18 | if (!handler || !ng.isFunction(handler)) { 19 | handler = ng.noop; 20 | } 21 | 22 | element.bind('scroll', function () { 23 | var 24 | remaining = element[0].scrollHeight - (element[0].clientHeight + element[0].scrollTop); 25 | 26 | //if we have reached the threshold and we scroll down 27 | if (remaining < lengthThreshold && (remaining - lastRemaining) < 0) { 28 | 29 | //if there is already a timer running which has no expired yet we have to cancel it and restart the timer 30 | if (promise !== null) { 31 | timeout.cancel(promise); 32 | } 33 | promise = timeout(function () { 34 | handler(); 35 | promise = null; 36 | }, timeThreshold); 37 | } 38 | lastRemaining = remaining; 39 | }); 40 | } 41 | 42 | }; 43 | }]); 44 | })(angular); 45 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # lrInfiniteScroll 2 | 3 | lrInfiniteScroll is a module for [AngularJS](http://angularjs.org/) which allow you to attach an event handler to the element when this element has been scrolled almost to its bottom. In most of the case it will be used for infinite scrolling. 4 | It is very light (about 45 lines of code) and optimized to reduce the amount of $digest loop. 5 | 6 | See the [example section](http://lorenzofox3.github.io/lrInfiniteScroll/index.html#example). 7 | 8 | ## Attach an Event Handler 9 | 10 | Simply set as attribute a function accessible within the $scope: 11 | 12 | ```html 13 | 16 | ``` 17 | 18 | ## Change the Scroll Threshold 19 | 20 | By default the handler will be called when the user is scrolling *down* and only *50* pixels are remaining before reaching the end 21 | of the element. You can overwrite the 50px by setting the attribute *scroll-threshold*: 22 | 23 | ```html 24 | 27 | ``` 28 | ## Change the Time Threshold 29 | 30 | To reduce the amount of $digest loop, instead of calling the handler whenever a scroll down event is detected in the end zone a timer is started and if no other event is detected within 400ms, then the handler is called. 31 | 32 | You can overwrite the time value by setting the *time-threshold* attribute: 33 | 34 | ```html 35 | 38 | ``` 39 | 40 | ## License 41 | 42 | lrInfinite scroll module is under MIT license: 43 | 44 | > Copyright (C) 2013 Laurent Renard. 45 | > 46 | > Permission is hereby granted, free of charge, to any person 47 | > obtaining a copy of this software and associated documentation files 48 | > (the "Software"), to deal in the Software without restriction, 49 | > including without limitation the rights to use, copy, modify, merge, 50 | > publish, distribute, sublicense, and/or sell copies of the Software, 51 | > and to permit persons to whom the Software is furnished to do so, 52 | > subject to the following conditions: 53 | > 54 | > The above copyright notice and this permission notice shall be 55 | > included in all copies or substantial portions of the Software. 56 | > 57 | > THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 58 | > EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 59 | > MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 60 | > NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS 61 | > BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN 62 | > ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 63 | > CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 64 | > SOFTWARE. 65 | --------------------------------------------------------------------------------