diff --git a/README.MD b/README.MD index 7bfab54..5f4a117 100644 --- a/README.MD +++ b/README.MD @@ -88,6 +88,7 @@ new Vue({ | Option | Description | | ----- | ----- | +| infinite-scroll-reverse | Instead triggering at the bottom, v-infinite-scroll will trigger on top of element. | | infinite-scroll-disabled | infinite scroll will be disabled if the value of this attribute is true. | | infinite-scroll-distance | Number(default = 0) - the minimum distance between the bottom of the element and the bottom of the viewport before the v-infinite-scroll method is executed. | | infinite-scroll-immediate-check | Boolean(default = true) - indicates that the directive should check immediately after bind. Useful if it's possible that the content is not tall enough to fill up the scrollable container. | diff --git a/src/directive.js b/src/directive.js index fefbed0..6455eed 100644 --- a/src/directive.js +++ b/src/directive.js @@ -152,12 +152,16 @@ var doBind = function () { doCheck.call(directive); }); } + + directive.reversedCheck = element.hasAttribute('infinite-scroll-reverse'); + }; var doCheck = function (force) { var scrollEventTarget = this.scrollEventTarget; var element = this.el; var distance = this.distance; + var reversed = this.reversedCheck; if (force !== true && this.disabled) return; //eslint-disable-line var viewportScrollTop = getScrollTop(scrollEventTarget); @@ -166,11 +170,19 @@ var doCheck = function (force) { var shouldTrigger = false; if (scrollEventTarget === element) { - shouldTrigger = scrollEventTarget.scrollHeight - viewportBottom <= distance; + if (reversed) { + shouldTrigger = scrollEventTarget.scrollTop <= distance; + } else { + shouldTrigger = scrollEventTarget.scrollHeight - viewportBottom <= distance; + } } else { + var elementTop = getElementTop(element) - getElementTop(scrollEventTarget); var elementBottom = getElementTop(element) - getElementTop(scrollEventTarget) + element.offsetHeight + viewportScrollTop; - - shouldTrigger = viewportBottom + distance >= elementBottom; + if (reversed) { + shouldTrigger = viewportScrollTop <= elementTop; + } else { + shouldTrigger = viewportBottom + distance >= elementBottom; + } } if (shouldTrigger && this.expression) {