Auto scroll to the End when a new message comes #397

Activity

1. TheDarkStrix commented on Jul 1, 2021

   

   TheDarkStrix

   on Jul 1, 2021

   Last edited by TheDarkStrix

   More actions

   You could do something like this

   This scroll to bottom initially and scrolls to bottom when there is a change in the chat list

   const ScrollbarWrapper = (props) => {
     const scrollBar = useRef();
   
     const handleOnScroll = (e) => {
       if (e.target.scrollTop === 0) {
         props.scrollFnc();
       }
     };
   
   // props.chat is a state that holds all the chat
   
     useEffect(() => {
       console.log("scrollbar change detected");
       if (scrollBar) scrollBar.current.scrollToBottom();
     }, [scrollBar, props.chat]);
   
     return (
       <Scrollbars
         onScroll={scrollHandler }
         universal={true}
         autoHide={true}
         autoHeight={true}
         ref={scrollBar}
         autoHeightMax={props.autoHeightMax}
         style={{
           overflowX: "hidden",
           margin:"1em 0em",
           padding:"0em",
         }}
         renderTrackHorizontal={(props) => (
           <div {...props} className="track-horizontal" />
         )}
         renderTrackVertical={(props) => (
           <div {...props} className="track-vertical" />
         )}
         renderThumbHorizontal={(props) => (
           <div {...props} className="thumb-horizontal" />
         )}
         renderThumbVertical={(props) => (
           <div {...props} className="thumb-vertical" />
         )}
         renderView={(props) => <div {...props} className="view" />}
       >
         {props.children}
       </Scrollbars>
     );
   };
   
   export default ScrollbarWrapper;