“Desplácese hasta el fondo de un Div React” Código de respuesta

reaccionar desplazamiento al fondo de div

import React, { useEffect, useRef } from 'react'

const Messages = ({ messages }) => {

  const messagesEndRef = useRef(null)

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }

  useEffect(() => {
    scrollToBottom()
  }, [messages]);

  return (
    <div>
      {messages.map(message => <Message key={message.id} {...message} />)}
      <div ref={messagesEndRef} />
    </div>
  )
}
Clear Copperhead

Desplácese hasta el fondo de un Div React

// without smooth-scroll
const scrollToBottom = () => {
		divRef.current.scrollTop = divRef.current.scrollHeight;
};

//with smooth-scroll
const scrollToBottomWithSmoothScroll = () => {
   divRef.current.scrollTo({
        top: divRef.current.scrollHeight,
        behavior: 'smooth',
      })
}

scrollToBottom()
scrollToBottomWithSmoothScroll()
Inquisitive Iguana

Respuestas similares a “Desplácese hasta el fondo de un Div React”

Preguntas similares a “Desplácese hasta el fondo de un Div React”

Más respuestas relacionadas con “Desplácese hasta el fondo de un Div React” en JavaScript

Explore las respuestas de código populares por idioma

Explorar otros lenguajes de código