如何在React中滚动到div中的span元素，使其始终可见而不会溢出

Question

有一个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>;

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

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

currentWord发生了变化，当它向前索引时，它溢出了div。我希望div自动滚动到这个currentWord，但我一直找不到这样做的方法。我应该如何在React中进行此操作？

谢谢！

Answer 1

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

有关Element.scrollIntoView的详细信息：https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

如果您想要滚动的转换，请将scroll-behavior: smooth;css规则添加到容器分区。

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