scrollIntoView 将我带到页面顶部而不是底部

Posted 2023-02-25

【中文标题】scrollIntoView 将我带到页面顶部而不是底部

【英文标题】：scrollIntoView taking me to the top of page instead of bottom

【发布时间】：2021-05-07 21:34:05

【问题描述】：

我正在使用一种常用的方法来滚动到 React 组件的底部。

const messagesEndRef = useRef(null);
    
const scrollToBottom = () => 
  messagesEndRef.current?.scrollIntoView( behavior: "smooth" )
;

.....


<ul className="channel">
  messages.map((message) => 
    <Fragment key=message.id>
      message text
    </Fragment>
  )
  <div ref=messagesEndRef />
</ul>

但它正在滚动到组件的顶部。我认为这是因为我在通道 CSS 类中设置了高度和溢出：滚动，因为没有这些设置它可以正常工作，但是，我需要它们在那里。我怎样才能让它滚动到底部？我可以以某种方式重写 scrollToBottom 方法来做与它现在做的相反的事情吗？蒂亚！

【问题讨论】：

需要滚动到ul元素的末尾吗？

【参考方案1】：

让我们试试scrollIntoView(block: "end");

【讨论】：

好建议，但不幸的是没用：/

你能准备一个例子来说明你目前的进展吗？我认为它有效：codesandbox.io/s/funny-platform-8vgr2?file=/src/App.js:408-422