ReactJS/CSS实现滚动文本Hover时定位高亮元素的方案咨询

仅用CSS能否实现？ #

不行。CSS无法动态检测元素的位置并自动调整容器的滚动偏移量，必须借助JavaScript/React来计算位置并控制滚动行为。

React实现方案（修复你的代码问题） #

你的代码失效的核心原因：你用了transform: translateX()实现滚动动画，而offsetLeft只会返回元素的原始布局位置，不会考虑transform带来的偏移，导致滚动计算完全错误。

正确的做法是用getBoundingClientRect()获取元素的实际可视位置，再计算容器需要滚动的距离：

完整实现代码 #

import { useRef } from 'react';

const InfiniteScrollText = () => {
  const containerRef = useRef(null);
  // 存储所有高亮元素的ref（因为有两个重复的carousel）
  const highlightRefs = useRef([]);

  const handleContainerHover = () => {
    const container = containerRef.current;
    if (!container) return;

    // 获取容器的可视区域位置
    const containerRect = container.getBoundingClientRect();
    // 筛选出当前在容器可视范围内的高亮元素
    const visibleHighlight = highlightRefs.current.find(el => {
      const rect = el.getBoundingClientRect();
      return rect.right > containerRect.left && rect.left < containerRect.right;
    });

    if (!visibleHighlight) return;

    const highlightRect = visibleHighlight.getBoundingClientRect();
    // 计算高亮元素中心相对于容器左侧的偏移
    const highlightCenterOffset = highlightRect.left - containerRect.left + highlightRect.width / 2;
    // 容器的中心位置
    const containerCenter = containerRect.width / 2;
    // 需要滚动的距离：让高亮中心对齐容器中心
    const scrollX = container.scrollLeft + (highlightCenterOffset - containerCenter);

    // 执行平滑滚动
    container.scrollTo({
      left: scrollX,
      behavior: 'smooth'
    });
  };

  // 给每个高亮元素绑定ref
  const setHighlightRef = (el) => {
    if (el && !highlightRefs.current.includes(el)) {
      highlightRefs.current.push(el);
    }
  };

  return (
    <div className="content">
      <div 
        className="carousel-container" 
        ref={containerRef}
        onMouseEnter={handleContainerHover}
      >
        <div className="carousel">
          <span>This is a <span className="highlight" ref={setHighlightRef}>part</span> of a sentence.</span>
        </div>
        <div className="carousel">
          <span>This is a <span className="highlight" ref={setHighlightRef}>part</span> of a sentence.</span>
        </div>
      </div>
    </div>
  );
};

export default InfiniteScrollText;

配套CSS（保留无限滚动逻辑，仅微调） #

@keyframes carousel {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

.content {
    display: flex; 
    flex-direction: column;
    font-size: calc(85vh/8);
}

.carousel-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    /* 开启横向滚动 */
    overflow-x: auto;
    /* 隐藏滚动条 */
    scrollbar-width: none;
}

.carousel-container::-webkit-scrollbar {
    display: none;
}

.carousel {
    display: inline-block;
    animation: 120s carousel infinite linear;
    margin: 0;
    /* 让两个carousel无缝衔接 */
    padding-right: 100%;
}

.carousel-container:hover .carousel {
    animation-play-state: paused;
}

.highlight {
    font-weight: 600;
}

关键修复点 #

1. 用getBoundingClientRect()获取真实位置：这个方法会返回元素当前在屏幕上的可视位置，包含transform的偏移，计算更准确。
2. 处理多个重复的高亮元素：因为用了两个carousel实现无限滚动，所以要找到当前可视范围内的那个高亮元素再计算。
3. 容器滚动逻辑修正：基于容器的scrollLeft来计算滚动距离，而非直接用元素的offsetLeft。

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