仅自动滚动子组件，而不是父组件

Question

请参阅：https://jsfiddle.net/wh6r4ybe/42/

const historyEndRef = useRef(null);

const scrollToBottom = () => {
  historyEndRef.current.scrollIntoView({ behavior: "smooth" });
};

useEffect(() => {
  scrollToBottom();
});

我希望使用上述方法在渲染时自动滚动到蓝色子组件的底部，但结果也将滚动到红色父组件的底部。

如何避免滚动父组件？

Answer 1

您可以将block属性与值end一起使用：

historyEndRef.current.scrollIntoView({ behavior: "smooth", block: 'end' });

fiddle