virtual-list icon indicating copy to clipboard operation
virtual-list copied to clipboard

[QUESTION]如何判断已经滚动到了底部

Open xmsz-stu opened this issue 4 months ago • 2 comments

我通过ref.current.getScrollInfo拿到的信息很奇怪 我的高度设置的是200,内容高度是动态(获取到的是700),然后滚动到底部的时候scrollInfo.y显示的500,这个500的值应该是内容高度700-高度200. 但是我拿不到这个700的值,我就无法判断是否滚动到底部了

所以getScrollInfo能不能暴露更多的信息?

xmsz-stu avatar Feb 22 '24 08:02 xmsz-stu

可以获取 .rc-virtual-list-holder 的

temp2.getBoundingClientRect().y + temp2.getBoundingClientRect().height

和 .rc-virtual-list-holder-inner 的

temp3.getBoundingClientRect().y + temp3.getBoundingClientRect().height

是否相等,不过感觉还是 getScrollInfo 暴露更多信息更好,这些写就耦合了 dom 结构

NameWjp avatar Mar 26 '24 03:03 NameWjp

研究了下上面的方法不太准,可以使用下面的方法

const RC_VIRTUAL_LIST_HOLDER_CLASS = '.rc-virtual-list-holder'

export const isScrollBottom = (root: HTMLElement) => {
  const virtualList = root.querySelector(RC_VIRTUAL_LIST_HOLDER_CLASS)
  if (!isDef(virtualList)) {
    throw virtualError(`cannot find class ${RC_VIRTUAL_LIST_HOLDER_CLASS}`)
  }
  return virtualList.scrollTop >= virtualList.scrollHeight - virtualList.clientHeight
}

export const isScrollTop = (root: HTMLElement) => {
  const virtualList = root.querySelector(RC_VIRTUAL_LIST_HOLDER_CLASS)
  if (!isDef(virtualList)) {
    throw virtualError(`cannot find class ${RC_VIRTUAL_LIST_HOLDER_CLASS}`)
  }
  return virtualList.scrollTop <= 0
}

export const hasScroll = (root: HTMLElement) => {
  const virtualList = root.querySelector(RC_VIRTUAL_LIST_HOLDER_CLASS)
  if (!isDef(virtualList)) {
    throw virtualError(`cannot find class ${RC_VIRTUAL_LIST_HOLDER_CLASS}`)
  }
  return virtualList.scrollHeight > virtualList.clientHeight
}

NameWjp avatar Mar 26 '24 09:03 NameWjp