在 React 中向容器顶部添加内容时如何保持滚动位置

IT技术 javascript reactjs scroll react-redux infinite-scroll
2022-07-19 23:57:25

我正在尝试在react中创建消息传递应用程序。当滚动条位于顶部时,它会调度一个动作来获取较旧的消息,但即使在获取消息之后,滚动条仍然停留在顶部,因此它会继续触发调度动作以获取更多消息。有谁知道在向父容器的子容器顶部添加内容时如何保持滚动位置,以便滚动位置不会停留在顶部并停止触发请求。

<Fragment>
{messagesLoading && messages.length > 0 && <NoramlSpinner/>}
                    <li id='first' ref={lastPostElRef}>
                        <div className='mb-1 left-msg' >
                        </div>
                    </li>
                {messages.length > 0 &&
                    messages.map((message, i)=>{
                    if(profile.user._id !== message.sender._id ){

                        return <LeftMessage  message={message} key={message._id}/>
                    }
                    else{
                        return <RightMessages  message={message} key={message._id}/>

                    }

                })}    
</Fragment>
0个回答
没有发现任何回复~