gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 19:12:04 28 4
gpt4 key购买 nike

我已连接到 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>
);
}

最佳答案

正如 Daan 之前提到的,如果您可以发布结果页面,那将会有所帮助,因为之后可以将 CSS 规则应用于结果列表。看看这个 how-to-display-a-reverse-ordered-list-in-html

希望对你有帮助

关于javascript - 在 div 底部加载动态内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59083852/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com