javascript - 在 div 底部加载动态内容

Question

我已连接到 websocket，并在页面加载后从服务器提取实时数据。但是，我希望它从 div 的自下而上而不是自上而下加载。我希望我可以让它滚动到 div 的底部除非用户在这种情况下向上滚动。

Here's what I'm currently working with

(我还计划从他们的 REST API 中提取更多数据，并预先加载带有 100-50 条消息的 div，这样用户在初始页面加载时就不会看到任何内容。不过，我确信这会是另一个问题😂)

我试过用

display: '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 规则应用于结果列表。看看这个 how-to-display-a-reverse-ordered-list-in-html

希望对你有帮助