How to implement a "Jump to Bottom" button?

[rj-david]

Is there an existing way to detect that the viewport of the message list is not at the bottom to be able to display a "Jump to Bottom" button?

[j-krl]

You can attach a ref to the message list and implement that yourself pretty easily. Just display the button when element.scrollHeight - element.scrollTop !== element.clientHeight. And then when you click the button just run ref.scrollToBottom().

[KDederichs]

@j-krl how'd you do that exactly? From what I found you get no access to the lists scrollHeight and scrollTop since the only thing the ref exposes is the ref.scrollToBottom method.

[j-krl]

@KDederichs Yeah, good point. I thought there was access to the raw DOM methods but it looks like it's some kind of React wrapper.

What you could do is just use a getElementById to grab the messageList in your useEffect when a message comes in, and then you'll have access to all your regular DOM instance properties. It might be the child of the MessageList that you want -- the scrollbar-container I believe it is.

[KDederichs]

Kind of works yeah, though since it's an inner component you can't just slap an ID on it.... you actually have to do

document?.getElementsByClassName(
    'scrollbar-container',
  )

and then take the fist one in there to get it... little bit annoying.

Well next thing to figure out would be how to properly keep the view position when adding elements to the top but tbh that's its own issue.

[TaiVuong]

Solution @supersnager , worked

• First, create a ref to hold message list const getListRef = () => document.querySelector( ".cs-message-list__scroll-wrapper" );

• Second, create a state to hold if scroll is bottom const [isScrollAtBottom, setIsScrollAtBottom] = useState(true);

  • Next, using useEffect to hacky onScroll event for message list useEffect(() => { const list = getListRef(); if (list) { list.addEventListener('scroll', handleScroll); } return () => { if (list) { list.removeEventListener('scroll', handleScroll); } }; },[ document.querySelector( ".cs-message-list__scroll-wrapper" )])

• Final, write a handleScroll function to logic check const handleScroll = (event:any) => { const list = getListRef(); if(list) { if (Math.ceil(list.scrollTop) + list.clientHeight >= list.scrollHeight) { setIsScrollAtBottom(true); } else { setIsScrollAtBottom(false); } } };

[TaiVuong]

use isScrollAtBottom to implement scrollToBottom button :D {!isScrollAtBottom ? <button onClick={() => { msgListRef.current?.scrollToBottom( 'auto' ); }} className="p-4 rounded-[50%] bg-[#f7def7]" style={{ position: 'absolute', bottom: '10%', left: '55%', transform: 'translateX(-50%)', zIndex:999 }}> <Image src={'/arrow-down.png'} width={20} height={20} alt=""/> </button> : null}