I am trying to implement a feature where a div always scrolls down automatically.
scrollDown(){
var chat = this.conversation;
this.conversation.scrollTop = chat.scrollHeight;
}
checkKeyPress(e){
if (e.key == "Enter") {
this.scrollDown();
...
}
}
<div id="scroll" ref={(conversation) => this.conversation = conversation} style={{display: "block",overflowY: "auto", overflowX: "hidden", position: "absolute", ...}}>
...
</div>
Here is a link to a GIF showcasing the error I am experiencing. Please pay attention to the sequence of events and where the issue occurs: . Thank you!
Note: The verifyKeyPress function has additional functionality for sending messages, but I have omitted it due to its length.
I figured out the problem. The scrollDown function should be included in the callback of another function that was not displayed here. Apologies for the confusion, it would have been difficult for someone to assist me without all the information. Despite my limited experience, thank you for your help.