Akryum / Akryum/vue-virtual-scroller
Can't stable getting a bounding rect of a DynamicScrollerItem in DynamicScroller
- 主要語言
- TypeScript
- 星號
- 10.8k
- 分支
- 973
- PR 合併指標
- 30 天內沒有已合併 PR
描述
### Describe the bug
Using DynamicScrollerItems in DynamicScroller with vertical scrolling.
I try to get a bounding rect of an item to detect if item visible to user in a scrollable area.
And I get a non actual negative values of top or bottom of this rect with a probability of 20-30%.
### Reproduction
```
export default {
props: [
'items',
],
methods: {
getItemBounds(itemIndex) {
const scrollerElement = this.$refs.itemsScroller.$el;
const scrollerElementRect = scrollerElement.getBoundingClientRect(); // it's always ok
console.debug('scrollerElement top, bottom, scrollTop', scrollerElementRect.top, scrollerElementRect.bottom, scrollerElement.scrollTop);
// By the way, I don't know how get item HTML-element in other way. Maybe there is another way?
const itemElement = scrollerElement.querySelector('[data-index="' + itemIndex + '"]');
if (itemElement) {
const itemElementRect = itemElement.getBoundingClientRect(); // it has wrong negative values sometimes
console.debug('itemElement top, bottom', itemElementRect.top, itemElementRect.bottom);
} else {
console.debug('itemElement not found'); // if scroll to far from item
}
},
},
}
.scroller {
height: 100%;
width: 100%;
overflow-y: scroll !important;
}
.select-none {
user-select: none;
}
.p-1 {
padding: 0.25rem;
}
```
Scroll to item (or far of item) of any index and call this.getItemBounds(itemIndex) for it.
If item is out of rendered buffer, it's ok, itemElement is null (not found).
If item is in rendered buffer.
Good console out:
```
scrollerElement top, bottom, scrollTop 72 403 652
itemElement top, bottom 222 254
```
Buggy console out:
```
scrollerElement top, bottom, scrollTop 72 403 2802
itemElement top, bottom -12729 -12697
```
The difference (bottom-top=height) is right in both cases. But top and bottom sometimes (and quite often) is a wrong negative values.
The items can be visible in scroll area in both cases, and can be not visible (out of scroll area) in both cases.
And it does not matter if item is completely visible in the scroll area or partial.
### System Info
```shell
In Chrome under Win 10
vue-virtual-scroller v.2.0.0-beta.3
```
### Used Package Manager
yarn
### Validations
- [X] Read the [docs](https://github.com/Akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/README.md).
- [X] Check that there isn't [already an issue](https://github.com/Akryum/vue-virtual-scroller/issues) that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/Akryum/vue-virtual-scroller/discussions).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.
貢獻指南
這個儲存庫沒有索引到貢獻指南
評估
這個 Issue 還沒有評估資料。