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>

  )

}

const scrollToBottom = () => {

    containerRef.current?.scrollToEnd()

};

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

​

function ScrollToBottomExample() {

  const bottomRef = useRef(null);

​

  useEffect(() => {

    // Scroll to bottom when component mounts

    scrollToBottom();

​

    // Scroll to bottom after content updates, if desired

    // You can remove this part if not needed

    const observer = new MutationObserver(scrollToBottom);

    observer.observe(bottomRef.current, { childList: true });

​

    return () => {

      // Clean up observer on unmount

      observer.disconnect();

    };

  }, []);

​

  const scrollToBottom = () => {

    bottomRef.current.scrollIntoView({ behavior: 'smooth' });

  };

​

  return (

    <div>

      {/* Your content */}

      <div ref={bottomRef} />

    </div>

  );

}

const messagesEndRef = useRef(null);

  const [msgs, setMsgs] = useState([]);

​

  const scrollToBottom = () => {

    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });

  };

​

  useEffect(() => {

    scrollToBottom();

  }, [msgs]);

  function handleScroll() {

     setTimeout(() => {

      window.scroll({top: document.documentElement.scrollTop, behavior: 'smooth'});

     },300)

  }

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

​

const ScrollToBottom = () => {

  const messagesEndRef = useRef(null);

​

  useEffect(() => {

    scrollToBottom(); // Call the function to scroll to bottom when the component mounts

​

    // Scroll to bottom whenever new content is added (e.g., messages)

    // Assuming you have an array of messages stored in the "messages" state

    // You may need to adjust this logic based on your specific implementation

    const handleNewContent = () => {

      scrollToBottom();

    };

    // Replace 'messages' with your actual state name

    // Replace 'scrollToBottom' with the function name you use

    // for scrolling to the bottom of the messages container

    // Attach this event listener to whenever the content updates

    // to automatically scroll to the bottom

    // (e.g., after fetching new messages)

    // Example: useEffect(handleNewContent, [messages]);

    // Note: You may need to include additional dependencies in the dependency array if required.

    // Also, make sure the dependency array is updated correctly.

​

    // Cleanup function to remove the event listener when the component unmounts

    return () => {

      // Remove the event listener you attached earlier to avoid potential memory leaks

      // Example: removeEventListener('event', handleNewContent);

    };

  }, []);

​

  // Function to scroll to the bottom of the content

  const scrollToBottom = () => {

    // Replace 'messages' with your actual state name

    // Replace 'messagesContainerRef' with the reference to your messages container

    // (e.g., <div ref={messagesContainerRef} />)

    // Example: messagesContainerRef.current.scrollTo(0, messagesContainerRef.current.scrollHeight);

    // Make sure to use appropriate scrolling logic based on your container type.

  };

​

  return (

    <div> {/* Replace with your actual messages container */}

      {/* Example: <div ref={messagesContainerRef}> ...messages... </div> */}

      {/* Use the ref to the actual container element in the scrollToBottom function */}

      <div ref={messagesEndRef} />

    </div>

  );

};

​

export default ScrollToBottom;