Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wvq opened this issue Nov 7, 2023 · 0 comments
Open

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

wvq opened this issue Nov 7, 2023 · 0 comments

Comments

@wvq
Copy link

wvq commented Nov 7, 2023

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 的问题也一并解决了

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

No branches or pull requests

1 participant