react-scroll 在 Electron 应用程序中不起作用答案

【问题标题】：react-scroll does not work in Electron appreact-scroll 在 Electron 应用程序中不起作用
【发布时间】：2020-10-08 22:32:22
【问题描述】：

为什么 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 在使用效果中触发时没有任何反应

【问题讨论】：

实际行为和预期行为是什么？
@tpikachu ，我更新了描述，谢谢

标签： reactjs electron react-scroll

【解决方案1】：

我猜你应该将此实现移动到另一个组件

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

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

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

【讨论】：