将滚动条开始到div标签的底部

时间:2018-04-02 14:32:43

标签: javascript css vue.js

我知道它简单易行,但在我的情况下,我不知道为什么它不起作用, 我有滚动div,我希望它从底部开始。我在这里阅读了一些问题,并在谷歌搜索,但它没有在我的程序中工作。这是我的jquery代码它从底部开始但是当我滚动时它总是会回到底部。所以我删除了设置的间隔,我只是调用函数updateScroll();但滚动开始在顶部再次帮助我

<script type="text/javascript">

  function updateScroll(){
  var element = document.getElementById("msgss");
  element.scrollTop = element.scrollHeight;
 }
 setInterval(updateScroll,1000);

</script>

这是我的div标签

<div class="col-md-6 convo">
  <chat-log :messages="messages" id="msgss"></chat-log>
  <div class="row">
    <div class="col-md-12 chat-composer">
      <textarea class="compose" type="text" name="" placeholder="Type your Message" v-model="messageText" @keydown="vmsg"></textarea>
      <button type="button" name="button" class="btn btn-primary send" @click="sendMessage">Send</button>
    </div>
  </div>
</div>

这是<chat-log :messages="messages" id="msgss"></chat-log>

的内容
<template lang="html">
  <div class="chat-log">
      <chat-message v-for="message in messages" v-bind:key="messages.text" :message="message"></chat-message>
      <div class="empty" v-show="messages.length === 0">
          Nothing here yet!
      </div>
  </div>
</template>

和css

#msgss{
  overflow-y: auto;
  height: 540px;
}

1 个答案:

答案 0 :(得分:0)

  

请试试这个

 window.setInterval(function() {
      var element = document.getElementById('msgss');
      element.scrollTop = element.scrollHeight;
    }, 1000);