scrollTop返回0

Question

我打算在vuejs应用中使用固定的div作为聊天框。 div滚动其自身的内容。打开聊天框后，我会尝试自动滚动到底部，但它永远无法正常工作。

我尝试将scrollHeight分配给scrollTop，但是即使分配后scrollTop始终返回0。 我还向包含聊天窗口的scrollBar的父组件发出了一个事件以尝试滚动，但问题是相同的。 scrollTop永远不会分配。

let msg = document.querySelector(".messanger .messanger-body");
msg.scrollTop = msg.scrollHeight;
console.log(msg.scrollTop);
console.log(msg.scrollHeight);

我的问题是msg.scrollTop从来没有分配msg.scrollHeight是什么。仍为0。

<div class="messanger">
  <div class="messanger-header text-center">
    <div class="row h-100">
      <div class="col-sm-12 my-auto">
        <h2 class="ml-2 text-white">Chat</h2>
        <div class="float-left">
          <base-button size="sm" class="ml-1" type="primary" @click="returnToPrev">&larr;</base-button>
        </div>
        <div class="float-right">
          <base-button size="sm" class="mr-1" type="primary">Send message</base-button>
        </div>
      </div>
    </div>
  </div>
  <div class="messanger-body">
    <div>
      <!-- child component -->
      <message-thread :user="msgThread.user" @scrolltobtm="scrollViewToBtm"></message-thread>
    </div>
  </div>
</div>

对于父组件，我有类似的CSS

.messanger {
  background: white;
  position: fixed;
  top: 0;
  width: 310px;
  height: 70vh;
  float: right;
  right: 10px;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-top: 20vh;
  border-top-left-radius: 20px;
  border: 2px solid red;
}
.messanger .messanger-header {
  position: fixed;
  height: 60px !important;
  width: 310px !important;
  background: #25457a;
  color: #ffffff;
  z-index: 99999;
  border-top-left-radius: 20px;
}
.messanger .messanger-body {
  margin-top: 65px;
}

对于我的孩子，我有

    <div class="message-history mt-2">
      <div class="message-history-content">
        <div class="text-center mb-4">
          <span class="badge badge-info">Thread title : {{threadTitle}}</span>
        </div>
        <div v-for="(eachMessage, index) in messages" :key="index">
          <div :class="messagePosition(eachMessage.added_by)[0]"> 
            <!-- classes msg_container and msg_container_send are dynamically added here -->
            <span>{{eachMessage.message}}</span>
          </div>
        </div>
      </div>
      <div class="message-input">
        <form class="form m-1" @submit.prevent="sendMessage">
          <textarea v-model="model.message" class="form-control"></textarea>
          <div>
            <button class="ni ni-send"></button>
          </div>
        </form>
      </div>
    </div>

子组件css

.msg_container {
  margin-top: auto;
  margin-left: 20%;
  margin-right: 10px;
  border-radius: 15px;
  background-color: #82ccdd;
  padding: 10px;
  position: relative;
}
.msg_container_send {
  margin-top: auto;
  margin-right: 20%;
  margin-left: 10px;
  border-radius: 15px;
  background-color: #25457a;
  padding: 10px;
  position: relative;
  color: #ffffff;
}
.message-input {
  position: fixed;
  bottom: calc(100% - 90%);
  background: #ffffff;
  z-index: 99999;
}
.message-history {
  overflow-x: hidden;
  overflow-y: scroll;
  margin-bottom: 40px;
}
.message-history .message-history-content {
  overflow: scroll;
}
form {
  display: flex;
  width: 300px;
}
form button.ni.ni-send {
  margin-top: 3px;
  border-radius: 50%;
  border: none;
  height: 34px;
  width: 34px;
  background: #25457a;
  color: #ffffff;
}
textarea {
  flex-grow: 1;
  resize: none;
  border: 1px solid #25457a;
}
form button:focus {
  outline: 0;
}

谢谢您的帮助。 我在.message-history类中添加了溢出属性，但仍然无法正常工作。我相信我的错误在于我的风格。我不是CSS专家。 当使用鼠标滚动时，聊天窗口也会滚动。

Answer 1

由于至少两件事，

msg.scrollTop可能保持0值。

第一个.messanger-body没有定义溢出属性。 其次是.messanger-body的初始阶段内容，没有足够的内容使滚动出现在div的右侧。

请检查这些选项。