Next.js Discord

Discord Forum

Scroll to Bottom of overflow div not working

Unanswered
Horned oak gall posted this in #help-forum
Open in Discord
Horned oak gallOP
I have a chat window where when it is opened it should automatically scroll to the bottom but instead I get a null error on the "scrollIntoView".
function scrollToBottom() {
        let element = document.getElementById("messages-container");
        // element.scrollTop = element.scrollHeight;
        element.scrollIntoView({ behavior: "smooth", block: "end" })
    }

function handleConversationClick(message) {
        getMessages(message.senderIdentity.identityId, message.receiverIdentity.identityId);
        console.log(messages)

        if (message.senderIdentity.identityName == session?.user.username) {
            setDisplayConversationName(message.receiverIdentity.identityName);
        } else {
            setDisplayConversationName(message.senderIdentity.identityName);
        }
        renderConversation();
        scrollToBottom(); //is called after renderConversation() so the elements should be there
    }
-----------------------------
//this section here is a conditional load of html
:
                            <div>
                                <button className="text-3xl absolute top-0 left-4" onClick={() => renderConversation()}>&lt;-</button>
                                <p className="pt-6 text-lg">{displayConversationName}</p>
                                <div className="overflow-y-auto h-64" id="messages-container">
                                    {messages?.map((message) => (
                                        <div className="flex m-2">
                                            <div className={`text-small text-black m-1 border border-black rounded-xl p-2 bg-rtBlue ${message.senderIdentity.identityId == session?.user.identityId ? 'ml-auto' : 'mr-auto'}`}>{message.message}</div>
                                        </div>
                                    ))}
                                </div>
                                <input className="border border-black w-72" type="text"></input>
                            </div>
                        }

7 Replies

Horned oak gallOP
I included snippets of what I believe is the relevant code and also the entire file for a larger perspective of the page
The only thing I could think of being the issue is that the html div that we want to scroll to the bottom of is rendered conditionally but the scrollToBottom() func isn't called until after the render so it shouldn't be an issue
Here are some screen shots of the issue playing out as well:
The first one is the first view shown before the div we want to scroll to the bottom of is rendered. Then when one of those conversations is clicked it renders the messages view THEN scrollToBottom() is called but this error is thrown instead.
Horned oak gallOP
Tried to switch to using useRef instead of the dom selector and still have the result of ref.current = null
Horned oak gallOP
Still looking for a solution involving useRef.

I switched over to using a css hack with flex-col-revesrse for the time being but I forsee the css hack causing issues down the road with dynamic content generation
Anay-208 | Ping on replies
instead of document.getElementById, use useRef(Recommend unless there is a edge case for which it is required)
Element surely exists, but still add a condition to check if it exists. You can debug with the help of that