在div底部加載動態內容

Question

我已連接到websocket，並在頁面加載后從服務器提取實時數據。 但是，我希望它從div的底部向上而不是從頂部向下加載。 我希望我可以保持滾動到div的底部， 除非在這種情況下用戶向上滾動。

這是我目前正在處理的

（我還計划從他們的REST API中提取更多數據，並預先在div中預加載100-50條消息，以便用戶在初始頁面加載時看不到任何內容。不過，我敢肯定，這將是另一個問題😂）

我試過使用

顯示：'flex'，flexDirection：'column-reverse'

但是在這種情況下，似乎這並不是解決方案。 溢出？ 我不確定

這是組件所在的父.js文件：

     <Layout style={{ minHeight: '100vh' }}>
       <div style={{width: '100%', height: '100%'}}>
         <Header id="header">
         </Header>

         <Content style={{ padding: '24px 50px 0px 50px' }}>
           <div style={{ borderRadius: '6px', border: '1px solid rgb(235, 237, 240)', background: '#fff'}}>
             <Tbox/>
           </div>
         </Content>
         <Footer/>
       </div>
     </Layout>

然后是組件本身：

  render() {

    const chatBox = 
      <List 
        dataSource={this.state.data}
        renderItem={item => (
          <List.Item >
            <List.Item.Meta
              avatar={<Avatar size="large" icon="user" />}
              title={<div><a href="https://example.com">{item.user}</a> {item.date}</div>}
              description={item.message}
            />
          </List.Item>
        )}
      />;

    return (
      <div>
        <div style={{ height: 400 }}>
          <Scrollbars style={{ height: 400 }}>
            <section style={{display: 'flex !important', flexDirection: 'columnReverse !important' }}>
              <div>
                {chatBox}
              </div>
            </section>
          </Scrollbars>
        </div>


        <div style={{ width: '100%', padding: 0 }}>
          ...
        </div>

      </div>
    );
  }

Answer 1

正如Daan之前提到的，如果您可以發布結果頁面，這將有所幫助，因為之后可以將CSS規則應用於結果列表。 看一下如何在HTML中顯示一個反向排序的列表

希望這可以幫助