Merge pull request #1 from hborchardt/fix_offset_scrollbar_length

Add container offset to scrollbar length
iharbeck · Oct 4, 2023 · e003fbc · e003fbc
2 parents f2ebf3d + ad03fea
commit e003fbc
Showing 1 changed file with 9 additions and 7 deletions.
diff --git a/projects/ngx-virtual-scroller/src/lib/ngx-virtual-scroller.component.ts b/projects/ngx-virtual-scroller/src/lib/ngx-virtual-scroller.component.ts
@@ -87,6 +87,7 @@ export interface IPageInfo {
 export interface IViewport extends IPageInfo {
     padding: number;
     scrollLength: number;
+    scrollbarLength: number;
 }
 
 
@@ -799,15 +800,15 @@ export class VirtualScrollerComponent implements OnInit, OnChanges, OnDestroy {
 
                 let startChanged = itemsArrayModified || viewport.startIndex !== this.previousViewPort.startIndex;
                 let endChanged = itemsArrayModified || viewport.endIndex !== this.previousViewPort.endIndex;
-                let scrollLengthChanged = viewport.scrollLength !== this.previousViewPort.scrollLength;
+                let scrollbarLengthChanged = viewport.scrollbarLength !== this.previousViewPort.scrollbarLength;
                 let paddingChanged = viewport.padding !== this.previousViewPort.padding;
                 let scrollPositionChanged = viewport.scrollStartPosition !== this.previousViewPort.scrollStartPosition || viewport.scrollEndPosition !== this.previousViewPort.scrollEndPosition || viewport.maxScrollPosition !== this.previousViewPort.maxScrollPosition;
 
                 this.previousViewPort = viewport;
 
-                if (scrollLengthChanged) {
-                    this.renderer.setStyle(this.invisiblePaddingElementRef.nativeElement, 'transform', `${this._invisiblePaddingProperty}(${viewport.scrollLength})`);
-                    this.renderer.setStyle(this.invisiblePaddingElementRef.nativeElement, 'webkitTransform', `${this._invisiblePaddingProperty}(${viewport.scrollLength})`);
+                if (scrollbarLengthChanged) {
+                    this.renderer.setStyle(this.invisiblePaddingElementRef.nativeElement, 'transform', `${this._invisiblePaddingProperty}(${viewport.scrollbarLength})`);
+                    this.renderer.setStyle(this.invisiblePaddingElementRef.nativeElement, 'webkitTransform', `${this._invisiblePaddingProperty}(${viewport.scrollbarLength})`);
                 }
 
                 if (paddingChanged) {
@@ -874,7 +875,7 @@ export class VirtualScrollerComponent implements OnInit, OnChanges, OnDestroy {
                         this.zone.run(handleChanged);
                     }
                 } else {
-                    if (maxRunTimes > 0 && (scrollLengthChanged || paddingChanged)) {
+                    if (maxRunTimes > 0 && (scrollbarLengthChanged || paddingChanged)) {
                         this.refresh_internal(false, refreshCompletedCallback, maxRunTimes - 1);
                         return;
                     }
@@ -1324,15 +1325,16 @@ export class VirtualScrollerComponent implements OnInit, OnChanges, OnDestroy {
 
         let pageInfo = this.calculatePageInfo(scrollStartPosition, dimensions);
         let newPadding = this.calculatePadding(pageInfo.startIndexWithBuffer, dimensions);
-        let newScrollLength = dimensions.scrollLength;
+        let newScrollLength = Math.round(dimensions.scrollLength);
 
         return {
             startIndex: pageInfo.startIndex,
             endIndex: pageInfo.endIndex,
             startIndexWithBuffer: pageInfo.startIndexWithBuffer,
             endIndexWithBuffer: pageInfo.endIndexWithBuffer,
             padding: Math.round(newPadding),
-            scrollLength: Math.round(newScrollLength),
+            scrollLength: newScrollLength,
+            scrollbarLength: newScrollLength + offset,
             scrollStartPosition: pageInfo.scrollStartPosition,
             scrollEndPosition: pageInfo.scrollEndPosition,
             maxScrollPosition: pageInfo.maxScrollPosition