diff --git a/spec/e2e/html/1727_resize_scroll_top.html b/spec/e2e/html/1727_resize_scroll_top.html index 57539818c..fdac8a9cd 100644 --- a/spec/e2e/html/1727_resize_scroll_top.html +++ b/spec/e2e/html/1727_resize_scroll_top.html @@ -5,7 +5,6 @@ - -
This is the header which brings an offset of 200 px
-
-
-
-
-
+
+
+
+ This page allows to test scrolling behavior when scroll element is not whole page (html element), + and when the scrolling element is not at the top of the page. Also effects of multiple + scrollbars can be tested, as the html element also can be scrolled.
+ This is the header which brings an offset of 200 px
+
+
+
+
+
+
+
+
This causes the scrollbar on html element
diff --git a/src/utils.ts b/src/utils.ts index 295c58ae6..38fc8110a 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -351,7 +351,19 @@ export class Utils { static updateScrollResize(event: MouseEvent, el: HTMLElement, distance: number): void { const scrollEl = this.getScrollElement(el); const height = scrollEl.clientHeight; - const offsetTop = scrollEl.getBoundingClientRect().top; + // #1745 #1727 - check if mouse position is leaving scroll element. + // event.clientY is relative to origin of viewport, must compare this against position of scrollEl, + // accessible via clientHeight and getBoundingClientRect().top. + // Special situation if scroll element is 'html': here browser spec states that + // clientHeight is height of viewport, but getBoundingClientRect() is rectangle of html element; + // this discrepancy arises because in reality scrollbar is attached to viewport, not html element itself. + let offsetTop : number; + if (scrollEl === this.getScrollElement()) { + offsetTop = 0; + } else { + offsetTop = scrollEl.getBoundingClientRect().top; + } + const pointerPosY = event.clientY - offsetTop; const top = pointerPosY < distance; const bottom = pointerPosY > height - distance;