CODEWITHSUNDEEP
javascriptcssreactjsscrolluse-ref
Cody Smith
Cody Smith

Reputation: 55

scrollIntoView taking me to the top of page instead of bottom

I am using a common method to scroll to the bottom of a React component.

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>

But it is scrolling to the top of the component. I assume it's because I have a height and overflow:scroll set in the channel CSS class, because it works correctly without those settings, however, I need them to be there. How can I get this to scroll to the bottom? Can I somehow rewrite the scrollToBottom method to do the opposite of what its doing right now? TIA!

Upvotes: 0

Views: 1317

Answers (1)

Bart Krakowski
Bart Krakowski

Reputation: 1670

Let's try with scrollIntoView({block: "end"});

Upvotes: 1

Related Questions