javascript - 在div底部加载动态内容(Load dynamic content at the bottom of a div)

Question

I've connected to a websocket and pull real-time data from the server once the page is loaded.

(我已连接到websocket，并在页面加载后从服务器提取实时数据。)

However, I want it to load from the bottom-up and not from the top-down of the div.

(但是，我希望它从div的底部向上而不是从顶部向下加载。)

I'm hoping I can keep it scrolled to the bottom of the div unless the user scrolls up in this case.

(我希望我可以保持滚动到div的底部， 除非在这种情况下用户向上滚动。)

Here's what I'm currently working with

(这是我目前正在处理的)

(I'm planning to also pull more data from their REST API and preload the div with 100-50 messages prior so the user doesn't see nothing upon the initial page load. Though, I'm sure that'll be another question ??)

(（我还计划从他们的REST API中提取更多数据，并预先在div中预加载100-50条消息，以便用户在初始页面加载时看不到任何内容。不过，我敢肯定，这将是另一个问题??）)

I've tried using

(我试过使用)

display: 'flex', flexDirection: 'column-reverse'

(显示：'flex'，flexDirection：'column-reverse')

but that alone doesn't seem to be the solution in this case.

(但是在这种情况下，似乎这并不是解决方案。)

overflow?

(溢出？)

I'm not sure

(我不确定)

Here is the parent .js file that the component is within:

(这是组件所在的父.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>

And then here is the component itself:

(然后是组件本身：)

  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>
    );
  }

  ask by oofinator translate from so

Answer 1

As mentioned before by Daan, if you can post the result page, it would help since after that the CSS rule can be applied to the result list.

(正如Daan之前提到的，如果您可以发布结果页面，这将有所帮助，因为之后可以将CSS规则应用于结果列表。)

Take look at this how-to-display-a-reverse-ordered-list-in-html

(看一下如何在HTML中显示一个反向排序的列表)

Hope this could help

(希望这可以帮助)