如何在不滚动窗口的情况下滚动到子 div 的底部？答案

【问题标题】：How can I scroll to bottom of child div without scrolling window?如何在不滚动窗口的情况下滚动到子 div 的底部？
【发布时间】：2021-03-21 22:59:39
【问题描述】：

我有一个包含一个小聊天窗口的应用程序。按照通常的聊天方式，我希望它默认滚动到底部，如果正在添加一条消息，则滚动到最后一条消息。

我已经检查了一些其他解决方案，例如this one，它建议使用useRef 和scrollToElement 函数。我遇到的问题是它不会在我想要的元素中向下滚动，而是将整个窗口向下滚动到该元素。我在这里创建了一个代码框来说明我的设置：https://codesandbox.io/s/upbeat-albattani-zxprz?file=/src/App.js

使用上面链接的解决方案，整个窗口开始滚动，而不仅仅是灰色框。

如何根据自己的要求进行调整？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您可以在窗口上使用 scrollTo 方法。例如window.scrollTo(x-axis,y-axis) 并且由于页面底部的确切像素数会根据页面内容不断变化，您可以在正文 document.body.scrollHeight 上使用此属性你的代码看起来像这样window.scrollTo(0,document.body.scrollHeight); ** 因为您使用的是反应，所以在 useEffect 或 componentDidMount 方法中添加滚动代码它不必是主体，也可以是 div 元素，例如 element.scrollHeight

【讨论】：

【解决方案2】：

添加这个

显示：'flex'，

flexDirection:'column-reverse',

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div
      className="App"
      style={{
        height: "110vh",
        display: "flex",
        justifyContent: "center",
        alignItems: "center"
      }}
    >
      <div
        style={{ display: "flex", overflow: "hidden", position: "relative" }}
      >
        <div
          style={{
            display:'flex',
            flexDirection:'column-reverse',
            overflow: "auto",
            padding: "2rem",
            backgroundColor: "#ebebeb",
            height: "300px",
            fontSize: "2rem"
          }}
        >
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
          rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
          ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
          sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
          dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
          et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
          takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
          amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
          invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
          kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
          amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
          diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
          erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
          et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
          Lorem ipsum dolor sit amet.
        </div>
      </div>
    </div>
  );
}

【讨论】：