linums 聊天栏用户上拉脱敏方法

这个功能叫"滚动锚点脱敏"（Scroll AnchorDe-sensitization），目的是用户查看历史消息时，不被新消息顶走。

dwadaw

ScollHeight:是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。
ScollTop: 是当前视口所滑动到的顶部位置高度。
ClientHeight：是当前视口高度。

具体策略是计算用户当前视口底部( ScrollTop + ClientHeight) 与消息列表元素内容高度之间的距离是否大于一定的阈值，本项目中设置为 100，具体计算公式为 distanceFromBottom = ScrollHeight - ( ScrollTop + ClientHeight)。

Effect 实现：


// ========== 监听用户滚动 ==========
/**
 * 监听用户滚动行为
 *
 * 当用户滚动到距离底部超过 100px 时，进入"脱敏模式"
 * 脱敏模式下，新消息不会自动滚动到底部
 * 这让用户可以安心查看历史消息而不被新消息顶走
 */
useEffect(() => {
  const container = scrollContainerRef.current
  if (!container) return

  const handleScroll = () => {
    const { scrollTop, scrollHeight, clientHeight } = container
    const distanceFromBottom = scrollHeight - scrollTop - clientHeight
    setUserScrolledUp(distanceFromBottom > 100)
  }

  container.addEventListener('scroll', handleScroll, { passive: true })
  return () => container.removeEventListener('scroll', handleScroll)
}, [])