Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
HassanAbbas5 opened this issue Jun 20, 2021 · 1 comment
Open

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

HassanAbbas5 opened this issue Jun 20, 2021 · 1 comment

Comments

@HassanAbbas5
Copy link

I used ur scrollbar in my conversation i want to autoscroll to bottom of the conversation whenever i receive a new message please help or is there any method so that ( i will set scrollbar to always on bottom )? Thanks in advance

@TheDarkStrix
Copy link

TheDarkStrix commented Jul 1, 2021

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;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants