React滚动到页面指定区域时实现文本水平滚动的问题求助

核心解决思路 #

抛弃固定scrollY阈值的判定逻辑，将动画触发时机、动画进度与文本容器和视口的相对位置绑定，即可适配所有屏幕尺寸、任意页面内容高度的场景。

具体实现步骤 #

1. 给文本区域新增外层容器并绑定Ref

首先给两行文本加一个相对定位的外层容器，通过Ref拿到容器的实时位置信息：

import { useRef } from 'react'

// 组件内声明Ref
const textContainerRef = useRef(null)

// 布局部分，外层容器需要指定高度，避免绝对定位的文本无法撑开容器
<div 
  ref={textContainerRef} 
  style={{ position: 'relative', height: '200px' }}
>
  <div className="line1">
    <p className="text1" style={{ left: `${position}px` }}>
         Lorem ipsum dolor sit amet.
    </p>
  </div>
 
  <div className="line2">
    <p className="text1" style={{ right: `${position}px` }}>
         Lorem ipsum dolor sit amet.
    </p>
  </div>
</div>

2. 改写滚动逻辑，动态计算动画偏移量

不需要修改你现有的useScrollListener自定义Hook，直接修改业务逻辑的useEffect即可：

const scroll = useScrollListener();
// 初始偏移设为-800px，默认文本在视口外
const [position, setPosition] = useState('-800')
const textContainerRef = useRef(null)

useEffect(() => {
  // 容器未渲染时直接返回
  if (!textContainerRef.current) return

  const container = textContainerRef.current
  const containerTop = container.getBoundingClientRect().top
  const viewportHeight = window.innerHeight
  const containerHeight = container.offsetHeight

  // 配置动画触发时机：容器顶部碰到视口底部时开始，容器底部离开视口顶部时结束
  const startTrigger = viewportHeight
  const endTrigger = -containerHeight

  // 计算动画进度，区间0~1：0=刚触发，1=完全结束
  const progress = Math.max(0, Math.min(1, (startTrigger - containerTop) / (startTrigger - endTrigger)))

  // 计算当前偏移量：从-800px（视口外入场）到 视口宽度+800px（退场到对侧视口外）
  const maxOffset = window.innerWidth + 800
  const currentOffset = progress * maxOffset - 800
  setPosition(currentOffset.toString())
}, [scroll.y])

可调整参数说明 #

• 如果你希望文本滚到视口中间才开始动画，把startTrigger的值改成viewportHeight / 2即可
• 可以调整maxOffset的计算逻辑，控制文本滚动的速度和退场时机
• 如果不需要动画随滚动进度实时变化，只需要入场/退场两个状态，可以替换成Intersection Observer实现，滚动监听的性能消耗会更低

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