Skip to content

希望提供一个智能滚动功能 #28

@bo-zn

Description

@bo-zn

简述需求

Ant Design Vue 的 Tree 组件支持 智能自动滚动(Auto Scroll) 功能,类似 auto 行为。
https://3x.antdv.com/components/tree
scrollTo 方法的auto

当前 scrollToKey 表现 期望的智能滚动表现
总是将目标节点滚动到 列表最上方(顶部对齐) 智能判断:节点如果在视野内则不滚动不在视野内时,当被滚动数据在视口上方时候滚到顶部,反正则滚到底部
// 伪代码,key可以是索引也可以是绑定的key 参考Ant Design Vue tree组件源码判断边界(不完全准确,大概是这个思路)
const smartScrollToKey = (key: string) => {
  if (!listRef.value) return

  const offset = listRef.value.getOffset()
  const clientSize = listRef.value.getClientSize()
  const itemSize = listRef.value.getSize(key)

  const targetIndex = treeList.value.findIndex((item) => item.url === key)
  if (targetIndex === -1) return

  const itemTop = targetIndex * itemSize
  const itemBottom = itemTop + itemSize

  const scrollBottom = offset + clientSize
  if (itemTop < offset) {
    console.log('需要滚动到顶部')
    listRef.value.scrollToKey(key)
  } else if (itemBottom > scrollBottom) {
    console.log('需要滚动到底部')
    listRef.value.scrollToOffset(itemBottom - clientSize)
  }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions