如何从SpringValue获取派生值？实现拖拽表格表头固定效果

针对你用use-gesture+react-spring实现可拖拽表格时，因表格应用transform: translate3d导致position: sticky失效的问题，提供两种可行方案：

方案一：分离表头与表格主体 #

将表头移出表格的transform容器，通过反向同步拖拽位移实现固定效果：

import { useSpring } from 'react-spring'
import { useDrag } from '@use-gesture/react'

const DraggableTable = () => {
  const { y } = useSpring(() => ({ y: 0 }))
  const bind = useDrag(({ down, movement: [_, my] }) => {
    // 根据拖拽动作更新y值，可添加范围限制
    y.set(down ? my : 0)
  })

  return (
    <div className="overflow-hidden relative">
      {/* 独立表头，反向抵消表格拖拽位移 */}
      <animated.div className="table-header" style={{ y: y.interpolate(v => -v) }}>
        <div>列1</div>
        <div>列2</div>
      </animated.div>
      {/* 表格主体，绑定拖拽事件 */}
      <animated.div {...bind()} style={{ y }} className="table-body">
        {Array(20).fill(0).map((_, idx) => (
          <div key={idx}>行{idx+1} - 内容</div>
        ))}
      </animated.div>
    </div>
  )
}

说明 #

• 表头脱离表格的transform容器，避免被新包含块影响（sticky失效的根源就是transform创建的新包含块）
• 通过y.interpolate(v => -v)让表头反向移动，视觉上保持固定
• 需确保表头与表格列宽一致，可通过CSS统一设置或JS动态同步

方案二：改用top定位替代transform #

放弃transform实现拖拽，改用top属性，避免创建新包含块，让position: sticky正常工作：

import { useSpring } from 'react-spring'
import { useDrag } from '@use-gesture/react'

const DraggableTable = () => {
  const { y } = useSpring(() => ({ y: 0 }))
  const bind = useDrag(({ down, movement: [_, my] }) => {
    y.set(down ? my : 0)
  })

  return (
    <div className="overflow-hidden relative">
      <animated.div {...bind()} style={{ position: 'relative', top: y }}>
        {/* 表头使用sticky */}
        <div className="table-header" style={{ position: 'sticky', top: 0, backgroundColor: '#fff' }}>
          <div>列1</div>
          <div>列2</div>
        </div>
        {/* 表格内容行 */}
        {Array(20).fill(0).map((_, idx) => (
          <div key={idx}>行{idx+1} - 内容</div>
        ))}
      </animated.div>
    </div>
  )
}

说明 #

• 用top属性实现垂直拖拽，不会触发新包含块的创建，sticky可正常相对于父级overflow容器工作
• 性能略低于transform方案，但动画复杂度不高时可忽略
• 仅适用于垂直方向拖拽的场景

内容的提问来源于stack exchange，提问作者takeItIzzy