0

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

4

1 回答 1

0

我想您应该将此实现移动到另一个组件

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

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

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

于 2020-10-09T12:43:47.217 回答