scrollTop возвращает 0

Question

У меня есть фиксированный div в приложении vuejs, который я собираюсь использовать в качестве окна чата. Div прокручивает содержимое внутри себя. Я пытаюсь прокрутить вниз автоматически, как только окно чата открыто, но оно никогда не работает.

Я пытался назначить scrollHeight для scrollTop, но scrollTop всегда возвращает 0 даже после назначения. Я также отправил событие в родительский компонент, который содержит полосу прокрутки окна чата, чтобы попытаться прокрутить, но проблема та же. 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.

Пожалуйста, отметьте эти опции.