javascript - 强制 div 向下滚动

Question

我正在为我的应用程序构建一个私有(private)消息服务，但每当有新消息添加到 div 时，我很难尝试使消息 View 滚动到底部。

我看到了很多关于堆栈溢出的问题，其答案是

var objDiv = document.getElementById("messages");
objDiv.scrollTop = objDiv.scrollHeight;

但这似乎不起作用。

我使用 Angular 4 来构建应用程序

这是我尝试让 div 向下滚动的地方:

首先，当应用尝试获取特定线程的所有消息时:

getMessagesForThread(){
    console.log("getting messages for: ");
    console.log(this.selectedThread);
    this.userService.getMessagesForThread(this.selectedThread.id, this.page).then(data=>{
        console.log(data);
        if(data.length >0){
            this.selectedThread.messages.unshift.apply(this.selectedThread.messages, data)
            //this.selectedThread = thread;
            console.log(this.selectedThread);
            if(this.page < this.selectedThread.count){
                this.canLoad = true;
            }else{
                this.canLoad = false;
            }
            var objDiv = document.getElementById("messages");
                console.log(objDiv.scrollHeight);
                console.log(objDiv.scrollTop);
                objDiv.scrollTop = objDiv.scrollHeight;
        }

    })
}

当用户发送新消息时再次:

shouldSend($event){
    //console.log($event);
    if ($event.keyCode == 13) {
        if($event.shiftKey){
            console.log("SHIFT + ENTER");

        }else{
            console.log("send message");
            let message = new Message("", this.selectedThread.id, this.user.id, $event.target.value);
            console.log(message);
            this.userService.sendMessage(message).then(data=>{
                this.defaultValue = '';
                this.selectedThread.messages.push(data);
                var objDiv = document.getElementById("messages");
                console.log(objDiv.scrollHeight);
                console.log(objDiv.scrollTop);
                objDiv.scrollTop = objDiv.scrollHeight;

                console.log(objDiv.scrollTop);
            });
        }
    }
}

根据控制台日志，问题出在 objDiv.scrollTop = objDiv.scrollHeight 处，因为最后一个 console.log(objDiv.scrollTop); 的结果与第一个。

谁能看出我哪里出错了？

谢谢

编辑

这是 messages div 上使用的 CSS

.messageScreen{
overflow:auto;
height: 70vh;
padding-top: 2%;
padding-bottom: 55px;
}

Answer 1

我认为当你调整滚动顶部时，html实际上并没有更新。

也许尝试从 setTimeout 中更新 scrollTop .

例如

setTimeout(function() {
   var objDiv = document.getElementById("messages");
   console.log(objDiv.scrollHeight);
   console.log(objDiv.scrollTop);
   objDiv.scrollTop = objDiv.scrollHeight;

   console.log(objDiv.scrollTop);
}, 100);