Question 45896 in CSS Question posted in
Some basic documentation can be found here.

How to scroll bottom of div at launch? – CSS

I need to create a chat for my application, and to show the last messages when going on the chat page, I need to scroll automatically at the bottom of the div.

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;
        },
    }
}

I tried to use scrollTop by giving the scrollHeight of the div with the scroll.
scrollHeight get the good value (in this case 300), but scrollTop stays at 0.

Hope someone can help.
Thanks in advance !

Tags:

2

Answers


  1. 0

    Your code works for me as is, without the 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/[email protected]/dist/vue.js"></script>

    Also, the v-chat-scroll directive does the same thing, it works for me too:

    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/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-chat-scroll/dist/vue-chat-scroll.min.js"></script>
    Login or Signup to reply.
  2. 0

    the function .scrollIntoView(false) should scroll you to the bottom of a div. I have added a codesnippet, but this is just made out of html,js,css just to show how it works.

    entity = document.getElementsByClassName("text")[0];
for (let i = 0; i < 100; i++) {
  newItem = entity.children[0].children[0].cloneNode();
  newItem.innerText = i;
  entity.children[0].appendChild(newItem);
}

function f(){
  entity.children[0].scrollIntoView(false);
}
    .text{
  height: 100px;
  overflow-y: scroll;
  border: red solid 
}
    <div class="text">
  <div>
  <p>txt</p>
  </div>
</div>
<button onClick="f()">scroll to bottom</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search