Question

我使用vue js创建了一个聊天应用程序。我使用overflow：auto为我的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的底部而不是overflow：auto。

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

Answer 2

1.InternalGetHashCode(TElement value)
   at System.Linq.Set

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'是用户在停止自动滚动之前必须向上滚动的像素数量，因此您可以根据需要进行调整。

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

3 个答案: