javascript - 从底部 ReactJS 的滚动开始

Question

我有 2 个组件（父母和孩子）。子组件在可滚动的 div 中有一长串来自服务器的消息。我只是想从底部的滚动开始页面 - 就像正常的聊天一样。我不想看到它滚动到底部。我可以用 javascript 或 CSS 做到这一点吗？

这是我想要的一个例子。注意：不使用 FlatLists。 https://codesandbox.io/s/react-native-h32if?file=/src/App.js

提前致谢。

class ParentComponent extends Component{

    render(){
      return(
  
        <div>
                <ChildComponent key={uniqueKey()} stream_uid={this.props.match.params.stream_uid} />       
        </div>
      )
    }
  
}


class ChildComponent extends Component{

    constructor() {

        this.state = {
          chat_messages: []
        }

    }

    componentDidMount () {

        this.props.dispatch(getStream(this.props.stream_uid,1,this.props.history)); 

        if(this.props.stream) {

            this.setState({
                chat_messages: this.props.stream.stream.messages
            })
        }

    }

  render(){

    return(
        <div>

            {Array.isArray(this.state.chat_messages) && this.state.chat_messages.map(message => {                           
                return (
                    <div>
                        <div>{message.username}</div>
                        <div>{message.text}</div>
                    </div>
                )

            })}                                                            
        </div>

    )

  }
}

标签： javascriptcssreactjsscrollreact-component

Answer 1

您可以通过将 div 设置为像这样滚动到底部来做到这一点

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

export default function App() {
  const listRef = useRef();
  useEffect(() => {
    listRef.current.scrollTo(0, listRef.current.scrollHeight, "auto");
  }, []);

  return (
    <div
      style={{ height: "200px", overflowY: "scroll" }}
      id="list"
      ref={listRef}
    >
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
      <div>Mesages</div>
    </div>
  );
}

这是一个代码框演示