css - 如何将 React 中的元素滚动到容器内的特定位置？

Question

我希望我的 React 应用程序在页面加载时将特定元素滚动到视图中。它确实会滚动它，但它会停在 div 的最顶部。所以发生的情况是，只有 div 的顶部部分是可见的，其余部分从下面的视图中隐藏。

请注意，我不想让页面滚动。

const messagesEndRef = useRef(null);

useEffect(() => {
    if (messagesEndRef.current) {
        messagesEndRef.current.scrollIntoView({ block: 'end', behavior: 'smooth' });
    }
}, [messages]);


<ParentComponent>

    // MORE DIVS & COMPONENTS FOR MESSAGES
    .....

    // TARGET DIV TO SCROLL INTO VIEW
    <div ref={messagesEndRef}/>

</ParentComponent>

其他块选项，如“开始”、“中心”、“最近”也不这样做。

<ParentComponent>包含一长串超出其可见高度的消息，因此需要将 messageEndRef 滚动到视图中。

我在这里尝试使用该解决方案，但它不起作用：Scroll to an element in a different, scrollable div in React using refs

上述解决方案表明了这一点。但它不会导致我的应用程序中的任何滚动：

const scrollToRef = ref => {
    ref.current.parentElement.scrollTo(0, ref.current.offsetTop);
};

然后如何将元素滚动到容器内的特定位置；例如，到视口高度的 50%？简而言之，我想强制<div ref={messagesEndRef}/>滚动到页面的大致中间。

标签： cssreactjsscrolluse-ref