自动使用溢出自动滚动到页面底部

Question

我已经使用vue js创建了一个聊天应用程序。 我使用溢出：自动为我的div。 我想要的是在div底部自动滚动，以便用户不再单击滚动即可查看最新消息。 我的代码不起作用，并且在控制台中未显示任何错误。 任何帮助，将不胜感激。 谢谢。

这是代码

    <template>
 <div class="panel-block">
        <div class="chat" v-if="chats.length != 0" id="myDiv">
         <div v-for="chat in chats" style="overflow: auto;">
             <div class="chat-right" v-if="chat.user_id == userid">
                 {{ chat.chat }}
             </div>
             <div class="chat-left" v-else>

                 {{ chat.chat}}
             </div>
         </div>

        </div>
        <div v-else class="no-message">
            <br>
            There are no messages
        </div>
        <chat-composer v-bind:userid="userid" v-bind:chats="chats" v-bind:adminid="adminid"></chat-composer>
 </div>
</template>

<script>
    export default {
    props: ['chats','userid','adminid', 'onlineuserss'],
}

$(document).ready(function(){
var myDiv = $("#myDiv");
myDiv.animate({ scrollTop: myDiv.prop("scrollHeight") - myDiv.height() }, 3000);
});

</script>

Answer 1

您可以使用此代码，该代码应将您放在div的底部，而不是溢出：自动。

var chatWindow = document.getElementById("chat in chats");
    chatWindow.scrollTop = chatWindow.scrollHeight;

Answer 2

  scrollToEnd () {
      var container = this.$el.querySelector('#myDiv')
      container.scrollTop = container.scrollHeight
  }

Answer 3

您想给滚动元素一个ID，以便您轻松选择它。 然后，我们想在数据更新时将该对象的scrollTop值设置为与scrollHeight相等。 在vue中，我们可以通过在数据更新后调用nextTick（）来实现。

但是，当我们仅执行此操作时，聊天将继续向下滚动每个新消息，这通常不是您想要的，因为这意味着当您的用户向上滚动时，聊天将随着每个新消息向下滚动。 为了让聊天只在我们已经滚动到底部时才向下滚动，我们可以检查用户是否向上滚动，只有在不是这种情况下，我们才自动向下滚动。 最终代码如下所示，在更新数据之后，您必须在更新数据的函数中执行此操作。

var chatWindow = document.getElementById('chat-id-here')
var isScrolled = (chatWindow.scrollTop < chatWindow.scrollHeight - chatWindow.offsetHeight - 10)

Vue.nextTick(function () {
  if (!isScrolled) {
    chatWindow.scrollTop = chatWindow.scrollHeight
  }
})

请注意，“ isScrolled”变量处的“-10”是用户在停止自动滚动之前必须向上滚动的像素数量，因此您可以根据需要进行调整。