1

What`s wrong with this code? After render div element scroll has to be in the bottom of div element. scrollTop not saving the value after func

<main>
<div v-if="messages">
   <ul ref="messagesContainer">
       <li v-for="message in messages" :key="`${message.text}.${message.username}`">
         <Message :message="message" :username="username" />
       </li>
   </ul>
</div>
</main>

 mounted() {
    this.scrollToEnd();
  },
  methods: {
    scrollToEnd() {
      const height = this.$refs.messagesContainer.scrollHeight;
      this.$refs.messagesContainer.scrollTo(0,height)
      // doesnt work 
      // this.$refs.messagesContainer.scrollTop = height
    }
  }

 main {
    background-color: #fff;
    height: 56vh;
    ul {
      height: 100%;
      overflow: auto;
      flex: auto;
    }
  }
Vagan M.
  • 433
  • 3
  • 10

3 Answers3

0

you can get the y position of the element via the offsetHeight property like this: var offsetTop = this.$refs.messagesContainer.offsetHeight;

You can find more information regarding offsetHeight, clientHeight and scrollHeight properties here

Note you need to call the scrollTo method on the window element:

example:

methods: {
    scrollToEnd() {
      var scrollHeight = this.$refs.messagesContainer.offsetHeight;
      this.$refs.messagesContainer.scrollTop = scrollHeight;
    }
  }

Hope this helps :)

dummker
  • 315
  • 1
  • 13
  • it doesn't help:( I don`t know where is the problem – Vagan M. Jul 10 '20 at 10:22
  • Is the window not scrolling at all? Can you try logging the `offset` value? Is it possible that you are trying to scroll to the bottom of the element before the messages are loaded and the component fully rendered? – dummker Jul 10 '20 at 10:26
  • I'm not sure that I need to use window, because scrolling only available in this div element – Vagan M. Jul 10 '20 at 10:31
  • Ahh okay I got you now. Then you need to set the `this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight`. Will edit the answer above. – dummker Jul 10 '20 at 10:35
  • can you try binding this method on a button click and call it just to see if that it's not related to any time-related rendering problem? – dummker Jul 10 '20 at 10:41
  • ``console.log(scrollTop,scrollHeight); this.$refs.messagesContainer.scrollTop =this.$refs.messagesContainer.scrollHeight; console.log(scrollTop,.scrollHeight)`` same logs in both situations... scrollTop isn`t saving the value – Vagan M. Jul 10 '20 at 10:47
0
<main>
   <ul v-if="messages" id="messagesContainer">
      <li v-for="message in messages" :key="`${message.text}.${message.username}`">
        <Message :message="message" :username="username" />
      </li>
   </ul>
</main>


scrollToEnd() {
  const element = document.getElementById('messagesContainer')
  element.scrollTop = element.offsetHeight + element.scrollHeight
}
Vagan M.
  • 433
  • 3
  • 10
0

This seems to work on Nuxt. This also provides a smooth scrolling as well.

  const element = this.$refs.messagesContainer;
  element.scrollIntoView({ behavior: "smooth", block: "start" });
Sudeep Devkota
  • 189
  • 1
  • 1
  • 11