异步加载scrollTop不生效问题解决

最新推荐文章于 2024-02-28 11:02:30 发布

lmp5023

最新推荐文章于 2024-02-28 11:02:30 发布

阅读量1.1k

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/lmp5023/article/details/106761930

版权

前端专栏收录该内容

47 篇文章

订阅专栏

本文详细介绍了在异步加载数据并追加到DOM元素后，如何确保页面滚动条自动滚动至底部的方法。通过在数据加载完成后的回调函数中调用scrollTop方法，实现了消息列表的自动滚动，解决了异步加载导致的scrollTop不生效问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

异步加载数据然后append之后，出现滚动条，然后我想把滚动条置底.

遇到的问题:scrollTop不生效

解决方案：scrollTop需要在异步加载完成后再调用，因为是异步的，在去后台获取数据的时候，如果scrollTop就触发了，那么就出现不生效的情况

        function getContent()        
        {
            var url = '192.168.30.128/index.php/api/index/getContent';
            $.ajax({
                type: 'post',
                url: url,
                data : {'from_id':from_id,'to_id':to_id},
                success: function(res){
                    
                    if (res.status == 1) {
                        // console.log(res.data)
                        $(res.data).each(function(index,content){
                            // console.log(content)
                            if(content.from_id == from_id){
                                var html = '<div class="msg guest"><div class="msg-right" customer="游客"><div class="msg-host"><img src="/admin/images/a.jpg" alt=""></div><div class="msg-ball" title="今天 17:52:06">'+content.content+'</div></div></div>'
                                $('#msgs').append(html)
                            }else{
                                var html = '<div class="msg robot"><div class="msg-left" id="welcomeLeft" worker="用户"><div class="msg-host photo" id="welcomeIcon" style="background-image: url(&quot;https://www.v5kf.com/files/icons/201711/15118623985.png&quot;);"></div><div class="msg-ball" id="welcomeBall"><span>'+content.content+'</span></div></div>'
                                $('#msgs').append(html)
                            }
                            // 置底
                            $(".pnl-msgs").scrollTop($(".pnl-msgs")[0].scrollHeight)
                        });
                    }else{
                        alert(res.msg)
                    }

                },			
                error:function(){
                //抛出异常
                    alert('error');    
                }
            }); 
        }