css Question posted in
Some basic documentation can be found here.

Css – React show last element

I have an issue and couldn’t find any approach to solve it.
I make a pet chat application, and of course, I want to show last message,
but because the last message appears at the end,
so I need to scroll,
but it doesn’t look good when u open chat and see manual scrolling from the first to the last message, any ideas?
In terms of HTML, we have a block that overlaps and we want to show the bottom of the content.
Loading doesn’t help we see scrolling anyway.


'use client';

import '@styles/chat-messages.scss';
import ChatMessage from '@components/chat-message';
import Spinner from '@components/spinner';
import { LoadingContext } from '@components/providers/LoadingProvider';

import { useRef, useLayoutEffect, useState, useContext } from 'react';

export default function ChatMessages() {
    const [loading, setLoadingMessages] = useState(true);
    // const {setLoading} = useContext(LoadingContext);
    let messages = Array.from({ length: 10 }).reverse();

    const messagesEndRef = useRef<HTMLDivElement>(null);

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

    useLayoutEffect(() => {
        scrollToBottom();
        setLoadingMessages(false);
    }, [messages]);

    return (
        <div className='chat-messages'>
            {    
                !loading &&
                (                
                    messages.map((_, index) => (
                        <ChatMessage key={index} i={index} />
                ))
                )
            }
            {
                loading && (
                    <Spinner />
                )
            }
            <div ref={messagesEndRef} className='chat-messages__point'></div>
        </div>
    );
}

it starts from the top and then scrolls, I see this behaviour
enter image description here
but I want to have it like this when open the page
so I want to be like this, but without seeing how elelemnt scrolling as it runs nowhere

If u want u can authorize with google (https://chat-room-chi-seven.vercel.app/), it uses simple oauth
I tried to use the loading state but it doesn’t work, maybe there is a react hook that runs before content is shown

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Change the behaviour to auto: messagesEndRef.current?.scrollIntoView({ behavior: 'auto' });


  2. 0

    it’s is probably because of The useLayoutEffect hook is running before the messages are fully rendered, causing the scrollToBottom function to execute prematurely. Try this

    useEffect(() => {
    setLoadingMessages(false);
}, []);

useEffect(() => {
    if (!loading) {
        scrollToBottom();
    }
}, [loading, messages]);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search