反应滚动在电子应用程序中不起作用

Question

为什么 react-scroll 包中的 animateScroll 在我的电子应用程序中不起作用？ BrowserWindow 的 ScrollBounce 设置为 true，这里是组件

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;

预期行为：聊天视图应在聊天填充或收到新消息后向下滚动到最后一条消息

实际行为：聊天属性更新和 animateScroll.scrollToBottom 在使用效果中触发时没有任何反应

Answer 1

我猜你应该为另一个组件移动这个实现

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

因为您现在尝试为 window(global) 添加滚动，而不是为在应用程序中有滚动条的父元素添加滚动，所以您在使用 window.scroll 和 animateScroll 时遇到问题.

为 "ContaierElementID" 的父元素添加此滚动方法应该可以解决您的问题

反应滚动在电子应用程序中不起作用

react-scroll does not work in Electron app

reactjs

electron

react-scroll