Skip to content

scrollToBottom 渲染前获取并设置高度bug #17

Open
@wvq

Description

@wvq

const scrollToBottom = () => {
if (shepherd.value) {
const offset =
shepherd.value[isHorizontal ? 'offsetLeft' : 'offsetTop'];
scrollToOffset(offset);
// check if it's really scrolled to the bottom
// maybe list doesn't render and calculate to last range
// so we need retry in next event loop until it really at bottom
setTimeout(() => {
if (getOffset() + getClientSize() < getScrollSize()) {
scrollToBottom();
}
}, 3);
}
};

这里3ms不够,可能在渲染新数据完成前获取高度。

参考 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame

一般情况每秒60次回调,就是17ms回调一次,设置成大于17ms的值才行。
页面比较卡的时候还是会有问题,以下写法更稳妥点:

const scrollToBottom = () => {
      if (shepherd.value) {
        requestAnimationFrame(() => {
          requestAnimationFrame(() => {
            scrollToOffset(shepherd.value[isHorizontal ? 'offsetLeft' : 'offsetTop'])
          })
        })
      }
    }

#13 的问题也一并解决了

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions