Skip to content

Commit dba7ece

Browse files
author
syn-zeta
authored
Fix #43: Infinite loading tables
`this.$el.offsetTop` will always evaluate to 0 when `this.$el` is inside a `td` (but the scrolling element is a `table`). This PR fixes the issue by explicitly calculating the top offset of `this.$el`, relative to the actual scrolling element, and not just the direct parent. I tried to see if `this.$el.offsetTop` will be updated by just setting CSS `position` to `relative` on `tr`, `td`, and `this.$el`, and all combinations, but no luck there. The performance hit of this PR will be an extra `getBoundingClientRect` call for `this.$el`.
1 parent 7af8b32 commit dba7ece

File tree

1 file changed

+5
-2
lines changed

1 file changed

+5
-2
lines changed

src/components/InfiniteLoading.vue

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,11 +50,14 @@
5050
if (dir === 'top') {
5151
distance = scrollTop;
5252
} else {
53+
const elmBoundingClientRect = elm.getBoundingClientRect();
5354
const scrollElmHeight = elm === window ?
5455
window.innerHeight :
55-
elm.getBoundingClientRect().height;
56+
elmBoundingClientRect.height;
57+
const elOffsetTopFromScrollElm = this.$el.getBoundingClientRect().top -
58+
elmBoundingClientRect.top;
5659
57-
distance = this.$el.offsetTop - scrollTop - scrollElmHeight - (elm.offsetTop || 0);
60+
distance = elOffsetTopFromScrollElm - scrollTop - scrollElmHeight - (elm.offsetTop || 0);
5861
}
5962
return distance;
6063
}

0 commit comments

Comments
 (0)