Question

我正在为我的应用程序构建一个私人消息服务，每当向div添加新消息时，我都难以尝试将消息视图滚动到底部。

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

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的结果相同。

任何人都可以看到我哪里出错了吗？

感谢

修改

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

上使用的CSS

Run

Answer 1

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

也许尝试在setTimeout内更新scrollTop。

e.g。

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

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

强制div向下滚动

1 个答案: