react-scroll does not work in Electron app

Question

Why animateScroll from react-scroll package doesn't work in my electron App? ScrollBounce set to true for BrowserWindow, here the component

import { css, cx } from "emotion";
import { animateScroll  } from "react-scroll";
import {
  ChatModel,
} from "domain/index";
import { useSelector } from "react-redux";
import { messageMapSelector } from "redux-layer/selectors";
import Message from "components/content-message";

const ChatView = ({ className, chat }) => {
  const messageMap = useSelector(messageMapSelector);

  useEffect(() => {
    animateScroll.scrollToBottom({
      containerId: "ContainerElementID"
    });
  }, [chat]);

  return (
    <div id="ContainerElementID">
      {chat.id
        ? (messageMap.get(chat.id) || []).map((message) => (
            <Message
              data={message}
              key={message.id}
            />
          ))
        : null}
    </div>
  );
};

export default ChatView;

Expected behavior: chat view should scroll down to the last message after chat populated or new messages come

Actual behavior: nothing happen when chat property updated and animateScroll.scrollToBottom fired in use effect

what is the actual behavior and what is the expected behavior? — tpikachu, Oct 09 '20 at 02:26

score 0 · Accepted Answer · edited Oct 09 '20 at 15:54

I guess you should to move this implementation for another component

animateScroll.scrollToBottom({
      containerId: "ContainerElementID"
});

Because you trying to add scroll for window(global) now instead of to add scroll for parent element which has your scrollbar in app, so you have issues with use window.scroll and animateScroll.

Add this scroll method for parent element of "ContaierElementID" should solve your issue

react-scroll does not work in Electron app

1 Answers1