Css 如何在启动时滚动 div 的底部

发布于03月30日

我需要为我的应用程序创建聊天，并在进入聊天页面时显示最后的消息，我需要在div的底部自动滚动.

VueJs:VueJs:

<template>
    <div id="app">
        <div class="comments" v-chat-scroll>
            <div v-for="comment in comments">
                //What defines the comment
            </div>
        </div>
    </div>
</template>

Css:以下内容:

.comments {
    margin: 2.5rem auto 0;
    max-width: 60.75rem;
    padding: 0 1.25rem;
    height: 300px;
    overflow-y: scroll;
}

Typescript :

export default {

    mounted() {
        this.scrollToEnd();
    },

    methods: {

        scrollToEnd() {
            var container = this.$el.querySelector(".comments");
            var scrollHeight = container.scrollHeight;
            container.scrollTop = scrollHeight;
        },
    }
}

我试图通过给scroll赋予div的scllHeight来使用scllTop. ScllHeight获得较好的值(在本例中为300)，但scllTop保持为0.

希望有人能帮上忙. 提前谢谢！

推荐答案

您的代码按原样为我工作，没有v-chat-scroll:

new Vue({
  el: '#app',
  data: {
    comments: Array.from({
      length: 50
    }, (_, i) => 'Comment ' + i).concat(['last comment - scroll here'])
  },
  mounted() {
    this.scrollToEnd();
  },

  methods: {

    scrollToEnd() {
      var container = this.$el.querySelector(".comments");
      var scrollHeight = container.scrollHeight;
      container.scrollTop = scrollHeight;
    },
  }
})

.comments {
  margin: 2.5rem auto 0;
  max-width: 60.75rem;
  padding: 0 1.25rem;
  height: 100px;
  overflow-y: scroll;
  border: 1px solid grey;
}

.comment {
  padding: 4px;
  border-top: 1px dotted grey;
}

<div id="app">
  <div class="comments">
    <div v-for="comment in comments">
      <div class="comment">{{comment}}</div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>

另外，v-chat-scroll指令做了同样的事情，它也适用于我:

new Vue({
  el: '#app',
  data:{
    comments: Array.from({length: 50}, (_,i) => 'Comment '+i).concat(['last comment - scroll here'])
  },
})

.comments {
  margin: 2.5rem auto 0;
  max-width: 60.75rem;
  padding: 0 1.25rem;
  height: 100px;
  overflow-y: scroll;
  border: 1px solid grey;
}

.comment{
  padding: 4px;
  border-top: 1px dotted grey;
}

<div id="app">
  <div class="comments" v-chat-scroll>
    <div v-for="comment in comments">
      <div class="comment">{{comment}}</div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-chat-scroll/dist/vue-chat-scroll.min.js"></script>