Chat application needs to scroll to bottom React/jQuery, not working

Question

I'm struggling with ensuring that the Segment is scrolled to the bottom. I read up a lot on Stack Overflow about how we have the scrollTop attribute in CSS as well as the scrollTop() function with jQuery. I'm copying here the relevant code I was able to find:

Heads up: I'm using React and Semantic UI react if that makes a difference. Also, I've just installed jQuery via npm to try to use the solutions I found online.

This is my Div:

<Segment  id="myDivID" style={{minHeight:"450px",maxHeight:"450px", "overflow-y":"auto", "scrollTop":"450px"}} >
    // all of the individual chat messages                                       
</Segment>

and here is the styling I'm trying to use in addition to the scrollTop attribute in the style passed above.

useEffect(()=>{
            var element = document.getElementById("myDivID");
            if(element){
                    window.scrollTo(0,element.offsetHeight);

            }
    },[])
    $('#myDivID').scrollTop($('#myDivID').scrollHeight);

Does this answer your question? [jQuery Scroll to bottom of page/iframe](https://stackoverflow.com/questions/1890995/jquery-scroll-to-bottom-of-page-iframe) — kmoser, Jul 30 '20 at 02:31

score 0 · Answer 1 · answered Jan 30 '21 at 19:52

You must define the ref.

const messageRef = useRef();

To this defined ref, you should give it to your message div

<Segment  id="myDivID" style={{minHeight:"450px",maxHeight:"450px", "overflow-y":"auto", "scrollTop":"450px"}} >
   <div ref={messageRef}>
      // all of the individual chat messages
   </div>                                     
</Segment>

Finally,

useEffect(() => {
    if (messageRef.current) {
      messageRef.current.scrollIntoView(
        {
          behavior: 'smooth',
          block: 'end',
          inline: 'nearest'
        })
    }
  })

Chat application needs to scroll to bottom React/jQuery, not working

1 Answers1