Skip to content
This repository has been archived by the owner on Apr 7, 2024. It is now read-only.

虚模式下表格从不可见到可见出现滚动条跳动问题 #323

Open
wqhui opened this issue Aug 18, 2022 · 0 comments
Open

虚模式下表格从不可见到可见出现滚动条跳动问题 #323

wqhui opened this issue Aug 18, 2022 · 0 comments

Comments

@wqhui
Copy link

wqhui commented Aug 18, 2022

开启虚模式,当表格渲染完毕后,竖直滚动到中间部分,此时将表格的父容器设置为display:none,然后在设置回display:block,可复现问题。

排查了一下,发现是updateRowHeightManager中在display:none时记录了空白的行高(代码块中616行)。

let zeroHeightRowCount = 0
let maxRowIndex = -1
let maxRowBottom = -1
for (const tr of this.domHelper.getTableRows()) {
const rowIndex = Number(tr.dataset.rowindex)
if (isNaN(rowIndex)) {
continue
}
maxRowIndex = Math.max(maxRowIndex, rowIndex)
const offset = tr.offsetTop + virtualTopHeight
const size = tr.offsetHeight
if (size === 0) {
zeroHeightRowCount += 1
}
maxRowBottom = Math.max(maxRowBottom, offset + size)
this.rowHeightManager.updateRow(rowIndex, offset, size)
}

因为display:none会导致表格的宽高变成0,此时也会进行重渲染,渲染又会去计算要渲染的区域,因为上面的步骤有空白的行高,导致这里滚动条发生变化,等再次设为display:block时滚动条就会发生跳动了...

render() {
const info = calculateRenderInfo(this)

想请教下,在updateRowHeightManager中发生行存在0高度时是否可以不记住此时的高度?我修改成这样可以解决问题。还是说当表格不可见时,updateRowHeightManager就不应该执行?还望赐教。

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant