时间戳

首页 > 解决方案 > 如何滚动到 React 中 div 内的 span 元素，使其始终可见且不会溢出

javascript - 如何滚动到 React 中 div 内的 span 元素，使其始终可见且不会溢出

问题描述

有一个 div 里面有一堆跨度，如下所示：

<div id="wordDisplayWrapper">
  {words.map((word, i) => {
    if (i === idx) {
      return (
        <span key={i} className={"currentWord"}>
          {word}
        </span>
      );
    } else {
      return (
        <span key={i} className={classes[i] || "word"}>
          {word}
        </span>
      );
    }
  })}
</div>;

跨度将从 div 溢出，并且溢出已设置为overflow-y: hidden;，这是 CSS：

#wordDisplayWrapper {
  height: 5.5em;
  overflow-y: hidden;
  outline: 1px solid orange;
}

currentWord 发生变化，当它向前索引时，它会溢出 div。我希望 div 自动滚动到这个 currentWord，但我还没有找到一种方法来做到这一点。我应该如何在 React 中解决这个问题？

谢谢！

标签： javascripthtmlcssreactjs

解决方案

您可以使用 html 选择器/refs 来定位要滚动的元素并调用scrollIntoView(). scrollIntoView(true)如果您希望当前单词位于容器顶部，请调用。

更多关于Element.scrollIntoView：https ://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

如果您想要滚动的过渡，请将scroll-behavior: smooth;css 规则添加到容器 div。

关于scroll-behavior： https ://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

推荐阅读