在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中显示一个反向排序的列表

希望这可以帮助