ngx-scroll-event - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

package.json

 {
 	"name": "ngx-scroll-event",
-	"version": "1.0.5",
+	"version": "1.0.6",
 	"description": "An Angular 2+ directive to handle scroll events on an element.",
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -5,3 +5,3 @@ # ngx-scroll-event
 ## Features
-- Detect scroll on an element or window and emits an event, also calculates if the user is reaching the bottom of that element or not.
+- Detect scroll on an element or window and emits an event, also calculates if the user is reaching the top/bottom of that element or not.
 
@@ -38,3 +38,3 @@ ## Install
 In your template you may now add the `detect-scroll` attribute and `(onScroll)` event to any element.
-you can also add `[bottomOffset]` to change when reaching bottom is alert is true, defaults to 100, the value should be a number in pixels.
+you can also add `[bottomOffset]` or `[topOffset]` to change when reaching bottom or top detection, bot values defaults to 100px, the value should be a number in pixels.
 
@@ -51,3 +51,3 @@ ```typescript
    template: `...
-        <div detect-scroll (onScroll)="handleScroll($event)" [bottomOffset]="200">
+        <div detect-scroll (onScroll)="handleScroll($event)" [bottomOffset]="200" [topOffset]="200" >
             <div>Bla bla bla</div>
@@ -71,2 +71,5 @@ <div>Bla bla bla</div>
     }
+    if (event.isReachingTop) {
+      console.log(`the user is reaching the bottom`);
+    }
     if (event.isWindowEvent) {
@@ -73,0 +76,0 @@ console.log(`This event is fired on Window not on an element.`);

src/scroll.directive.d.ts

 import { EventEmitter } from '@angular/core';
 export declare type ScrollEvent = {
+    isReachingBottom: boolean;
+    isReachingTop: boolean;
     originalEvent: Event;
-    isReachingBottom: boolean;
     isWindowEvent: boolean;
@@ -10,2 +11,3 @@ };
     bottomOffset: number;
+    topOffset: number;
     constructor();
@@ -12,0 +14,0 @@ scrolled($event: Event): void;

src/scroll.directive.js

@@ -17,2 +17,3 @@ "use strict";
         this.bottomOffset = 100;
+        this.topOffset = 100;
     }
@@ -30,4 +31,5 @@ // handle host scroll
         var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+        var isReachingTop = scrollTop < this.topOffset;
         var isReachingBottom = (target.body.offsetHeight - (window.innerHeight + scrollTop)) < this.bottomOffset;
-        var emitValue = { isReachingBottom: isReachingBottom, originalEvent: $event, isWindowEvent: true };
+        var emitValue = { isReachingBottom: isReachingBottom, isReachingTop: isReachingTop, originalEvent: $event, isWindowEvent: true };
         this.onScroll.emit(emitValue);
@@ -39,4 +41,5 @@ };
         var offsetHeight = target.offsetHeight;
+        var isReachingTop = scrollPosition < this.topOffset;
         var isReachingBottom = (scrollPosition - offsetHeight) < this.bottomOffset;
-        var emitValue = { isReachingBottom: isReachingBottom, originalEvent: $event, isWindowEvent: false };
+        var emitValue = { isReachingBottom: isReachingBottom, isReachingTop: isReachingTop, originalEvent: $event, isWindowEvent: false };
         this.onScroll.emit(emitValue);
@@ -53,2 +56,6 @@ };
     __decorate([
+        core_1.Input(),
+        __metadata("design:type", Number)
+    ], ScrollDirective.prototype, "topOffset", void 0);
+    __decorate([
         core_1.HostListener('scroll', ['$event']),
@@ -55,0 +62,0 @@ __metadata("design:type", Function),

src/scroll.directive.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"ScrollDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[detect-scroll]"}]}],"members":{"onScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"bottomOffset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"scrolled":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["scroll",["$event"]]}]}],"windowScrolled":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:scroll",["$event"]]}]}],"windowScrollEvent":[{"__symbolic":"method"}],"elementScrollEvent":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"ScrollDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[detect-scroll]"}]}],"members":{"onScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"bottomOffset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"scrolled":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["scroll",["$event"]]}]}],"windowScrolled":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:scroll",["$event"]]}]}],"windowScrollEvent":[{"__symbolic":"method"}],"elementScrollEvent":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"ScrollDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[detect-scroll]"}]}],"members":{"onScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"bottomOffset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"topOffset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"scrolled":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["scroll",["$event"]]}]}],"windowScrolled":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:scroll",["$event"]]}]}],"windowScrollEvent":[{"__symbolic":"method"}],"elementScrollEvent":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"ScrollDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[detect-scroll]"}]}],"members":{"onScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"bottomOffset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"topOffset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"scrolled":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["scroll",["$event"]]}]}],"windowScrolled":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:scroll",["$event"]]}]}],"windowScrollEvent":[{"__symbolic":"method"}],"elementScrollEvent":[{"__symbolic":"method"}]}}}}]

No alert changes

Improved metrics

Total package byte prevSize

45729

increased by1.97%

Lines of code

261

increased by3.57%

Number of lines in readme file

78

increased by4%

Worsened metrics

Number of package files

17

decreased by-5.56%

No dependency changes