Skip to content

fix(table): prevent scroll to top when expand table #5069

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
wants to merge 3 commits into
base: develop
Choose a base branch
from

Conversation

novlan1
Copy link
Contributor

@novlan1 novlan1 commented Feb 22, 2025

🤔 这个 PR 的性质是?

  • 日常 bug 修复
  • 新特性提交
  • 文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • CI/CD 改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他

🔗 相关 Issue

#5052

💡 需求背景和解决方案

📝 更新日志

  • fix(table): prevent scroll to top when expand table

  • 本条 PR 不需要纳入 Changelog

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • Changelog 已提供或无须提供

@novlan1
Copy link
Contributor Author

novlan1 commented Feb 22, 2025

packages/components/hooks/useVirtualScrollNew.ts 文件中的这个判断是不是本身就没必要,宽度超了,不是应该改变scrollLeft 到 0 吗(滚动到最左侧),需要滚动到顶部吗

 const refreshVirtualScroll = ([{ contentRect }]: [ResizeObserverEntry]) => {
    // 如果宽度发生变化,重置滚动位置
    if (params.value.preventResizeRefresh) return;
    const maxScrollbarWidth = 16;
    if (Math.abs(contentRect.width - containerWidth.value) > maxScrollbarWidth && !!container.value) {
      container.value.scrollTop = 0;
      translateY.value = 0;
    }
    containerWidth.value = contentRect.width;
    // 高度更新后,由 height 独立的 watch 触发可视区域的更新
    containerHeight.value = contentRect.height;
  };

Copy link
Contributor

github-actions bot commented Feb 22, 2025

TDesign Component Site Preview Open

Component Preview
tdesign-vue-next 完成
@tdesign-vue-next/chat 完成

@uyarn
Copy link
Collaborator

uyarn commented Feb 27, 2025

@chaishi cc

Copy link

pkg-pr-new bot commented Jun 12, 2025

tdesign-vue-next-demo

npm i https://pkg.pr.new/Tencent/tdesign-vue-next@5069
npm i https://pkg.pr.new/Tencent/tdesign-vue-next/@tdesign-vue-next/chat@5069

commit: ba69539

@Cat1007
Copy link
Collaborator

Cat1007 commented Jun 20, 2025

packages/components/hooks/useVirtualScrollNew.ts 文件中的这个判断是不是本身就没必要,宽度超了,不是应该改变scrollLeft 到 0 吗(滚动到最左侧),需要滚动到顶部吗

 const refreshVirtualScroll = ([{ contentRect }]: [ResizeObserverEntry]) => {
    // 如果宽度发生变化,重置滚动位置
    if (params.value.preventResizeRefresh) return;
    const maxScrollbarWidth = 16;
    if (Math.abs(contentRect.width - containerWidth.value) > maxScrollbarWidth && !!container.value) {
      container.value.scrollTop = 0;
      translateY.value = 0;
    }
    containerWidth.value = contentRect.width;
    // 高度更新后,由 height 独立的 watch 触发可视区域的更新
    containerHeight.value = contentRect.height;
  };

之前重构这个hook的时候,看到这里的判断,推测这里的思路是,宽度改变,影响元素高度,这时候虚拟滚动的高度缓存将不再可靠,所以将滚动高度也重置会0了?

@novlan1
Copy link
Contributor Author

novlan1 commented Jun 20, 2025

packages/components/hooks/useVirtualScrollNew.ts 文件中的这个判断是不是本身就没必要,宽度超了,不是应该改变scrollLeft 到 0 吗(滚动到最左侧),需要滚动到顶部吗

 const refreshVirtualScroll = ([{ contentRect }]: [ResizeObserverEntry]) => {
    // 如果宽度发生变化,重置滚动位置
    if (params.value.preventResizeRefresh) return;
    const maxScrollbarWidth = 16;
    if (Math.abs(contentRect.width - containerWidth.value) > maxScrollbarWidth && !!container.value) {
      container.value.scrollTop = 0;
      translateY.value = 0;
    }
    containerWidth.value = contentRect.width;
    // 高度更新后,由 height 独立的 watch 触发可视区域的更新
    containerHeight.value = contentRect.height;
  };

之前重构这个hook的时候,看到这里的判断,推测这里的思路是,宽度改变,影响元素高度,这时候虚拟滚动的高度缓存将不再可靠,所以将滚动高度也重置会0了?

感觉没必要

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

Successfully merging this pull request may close these issues.

3 participants