Why does window.scrollY return a smaller value than the document's total height when reaching...

I'm building a custom PDF viewer that renders pages as vertical images and I'm encountering a scroll position discrepancy:

Actual document height: document.documentElement.scrollHeight reports 10016px (sum of all image heights)

Final scroll position: window.scrollY only reaches 9410px at maximum scroll.

My html rendering code:

<div #canvas
*ngFor="let image of canvasItems; let i = index"
style="height: 100%;"
[ngStyle]="{'width': isGedPreview ? '100%' : ''}">
<img [src]="image" alt="pdf" [id]="'image-' + i" class="pdf-page"
[ngStyle]="{'max-width': getMaxWidth(), 'width': getWidth()}" (load)="updatePageHeights(i)">
<br>
</div>


My code that checkes the scroll action:

@HostListener('window:scroll', ['$event'])
onScroll() {
if (this.canSkipScrollAdjustment()) {
return;
}
const scrollPosition = window.scrollY;
const scrollHeigth = document.documentElement.scrollHeight;
console.log("scrollposition, ", scrollPosition); // 9410px
console.log("scrollHeigth, ", scrollHeigth); // 10016px
}

Continue reading...