Question

我正在创建聊天之类的应用程序。我想从底部开始滚动。（我知道在显示消息后如何向下滚动），但是，我不想强制滚动。

import React, { useEffect, useRef } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const Messages = ({ messages }) => {
  const messagesEndRef = useRef(null);
  
  const scrollToBottom = () => {
    messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
  };
  useEffect(scrollToBottom, [messages]);

  return (
    <div className="messagesWrapper">
      {messages.map(message => (
        <span key={message}>{message}</span>
      ))}
      <div ref={messagesEndRef} />
    </div>
  );
};

function App() {
  const allMessage = ['Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque consectetur nibh, sed dictum ligula. Maecenas vitae lacus eget est fermentum sagittis. Nullam vehicula quam felis, porttitor lobortis metus euismod at. Nulla risus sapien, ultricies sed feugiat quis, molestie sit amet erat. Aliquam in lacus ut diam maximus viverra ac eu nibh. Praesent feugiat quis nulla posuere sagittis. Vestibulum nulla magna, ornare et lorem sed, blandit ornare nibh. Morbi ac metus quis dui ullamcorper dictum. Ut scelerisque dignissim quam nec semper. Aliquam ut euismod ligula, sit amet congue sapien. Pellentesque mattis accumsan elit, ac elementum est venenatis ut. Donec vehicula leo id odio tincidunt tempor. Duis eget tempor augue, eu vehicula neque. Praesent vitae mi et nisl sodales faucibus aliquet ut nunc.', 'Curabitur id tincidunt purus. Nam lectus odio, efficitur vel ornare a, commodo vitae mauris. Donec in tincidunt lectus. Maecenas tortor massa, mattis congue sollicitudin eu, maximus et velit. Morbi purus risus, vehicula quis dolor at, tempus pellentesque enim. Mauris tempus quam nulla, eu faucibus nisi hendrerit quis. Duis eu sodales nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dignissim mattis accumsan. Integer neque mauris, commodo at lorem sit amet, pretium viverra nulla. Aenean eget tincidunt velit, sit amet placerat magna.']
  
  return (
    <div className="App">
      <Messages messages={allMessage} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

在这里，您看到它滚动到底部。我想从头开始。

工作示例：https://codesandbox.io/s/scrolltobottomexample-forked-d8ot6?file=/src/index.js

Answer 1

您可以使用包装器div scrollTop的{{1}}属性设置div滚动，以便在每个渲染器上将位置设置为底部。

为什么我要更新引用，原因是包装器上定义了静态高度，而messagesWrapper将为您引用的div返回0。

更新对包装div的引用并设置scrollTop值：

scrollHeight

从底部开始div滚动

1 个答案: