迫使一个div向下滚动

我建立了我的应用程序的私人通讯服务，我有困难，努力使信息查看滚动到每当一个新的消息添加到div底部。迫使一个div向下滚动

我见过其中的答案已经

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

但是这似乎并没有工作过的堆栈溢出许多问题。

我用角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

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

来源

2017-07-26 Jamie McAllister

我的猜测是你不能改变'scrollTop'的值。我可能是错的。 – jdmdevdotnet

但有一个办法做到这一点，每一个在线消息系统在那里做它笑 –

@jdmdevdotnet有可能：https://www.w3schools.com/jsref/prop_element_scrolltop.asp –

我估计HTML，当你调整滚动顶部没有实际更新所使用的CSS。

也许尝试从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);

来源

2017-07-29 12:32:01 H77

谢谢:)我从来没有想过这样做的。 –

迫使一个div向下滚动

回答

相关问题