fix(): update bar on content mutation

jkuri · Jun 20, 2020 · fe85f4c · fe85f4c
1 parent 0eed5b5
commit fe85f4c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/projects/ngx-slimscroll/src/lib/slimscroll.directive.ts b/projects/ngx-slimscroll/src/lib/slimscroll.directive.ts
@@ -159,6 +159,7 @@ export class SlimScrollDirective implements OnInit, OnChanges, OnDestroy {
 
   onMutation() {
     this.getBarHeight();
+    this.setBarTop();
   }
 
   wrapContainer(): void {
@@ -238,8 +239,6 @@ export class SlimScrollDirective implements OnInit, OnChanges, OnDestroy {
   scrollTo(y: number, duration: number, easingFunc: string): void {
     const start = Date.now();
     const from = this.el.scrollTop;
-    const maxElScrollTop = this.el.scrollHeight - this.el.clientHeight;
-    const barHeight = Math.max((this.el.offsetHeight / this.el.scrollHeight) * this.el.offsetHeight, 30);
     const paddingTop = parseInt(this.el.style.paddingTop, 10) || 0;
     const paddingBottom = parseInt(this.el.style.paddingBottom, 10) || 0;
 
@@ -266,13 +265,7 @@ export class SlimScrollDirective implements OnInit, OnChanges, OnDestroy {
         this.el.scrollTop = (easedTime * (y - from)) + from;
       }
 
-      const percentScroll = this.el.scrollTop / maxElScrollTop;
-      if (paddingBottom === 0) {
-        const delta = Math.round((this.el.clientHeight - barHeight) * percentScroll);
-        if (delta > 0) {
-          this.renderer.setStyle(this.bar, 'top', `${delta}px`);
-        }
-      }
+      this.setBarTop();
 
       const isScrollAtStart = this.el.scrollTop === 0;
       const isScrollAtEnd = this.el.scrollTop === this.el.scrollHeight - this.el.offsetHeight;
@@ -434,6 +427,19 @@ export class SlimScrollDirective implements OnInit, OnChanges, OnDestroy {
     this.interactionSubscriptions.add(dragEndSubscription);
   }
 
+  setBarTop(): void {
+    const barHeight = Math.max((this.el.offsetHeight / this.el.scrollHeight) * this.el.offsetHeight, 30);
+    const maxScrollTop = this.el.scrollHeight - this.el.clientHeight;
+    const paddingBottom = parseInt(this.el.style.paddingBottom, 10) || 0;
+    const percentScroll = this.el.scrollTop / maxScrollTop;
+    if (paddingBottom === 0) {
+      const delta = Math.round((this.el.clientHeight - barHeight) * percentScroll);
+      if (delta > 0) {
+        this.renderer.setStyle(this.bar, 'top', `${delta}px`);
+      }
+    }
+  }
+
   showBarAndGrid(): void {
     this.renderer.setStyle(this.grid, 'background', this.options.gridBackground);
     this.renderer.setStyle(this.bar, 'background', this.options.barBackground);

diff --git a/tsconfig.json b/tsconfig.json
@@ -17,7 +17,7 @@
     ],
     "paths": {
       "ngx-slimscroll": [
-        "dist/ngx-slimscroll"
+        "projects/ngx-slimscroll/src/public-api"
       ]
     }
   },