From 215dc1d1d9e797e65a7e36ff916358ea2743228b Mon Sep 17 00:00:00 2001 From: Kaung Myat Lwin Date: Tue, 13 Feb 2018 14:31:38 +0630 Subject: [PATCH 1/2] Reverse scroll --- README.MD | 1 + src/directive.js | 18 +++++++++++++++--- 2 files changed, 16 insertions(+), 3 deletions(-) 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..c8f0daa 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.scrollHeight + viewportScrollTop <= 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) { From 6d0df4915ba2e45adb886e2b771e1452557b1113 Mon Sep 17 00:00:00 2001 From: Kaung Myat Lwin Date: Fri, 9 Mar 2018 14:59:51 +0630 Subject: [PATCH 2/2] fix for element scroll --- src/directive.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/directive.js b/src/directive.js index c8f0daa..6455eed 100644 --- a/src/directive.js +++ b/src/directive.js @@ -171,7 +171,7 @@ var doCheck = function (force) { if (scrollEventTarget === element) { if (reversed) { - shouldTrigger = scrollEventTarget.scrollHeight + viewportScrollTop <= distance + shouldTrigger = scrollEventTarget.scrollTop <= distance; } else { shouldTrigger = scrollEventTarget.scrollHeight - viewportBottom <= distance; }