Vue js scroll event?

Question

Vue.js

there is a list of dialogues

<div class="contact-card" @click.prevent="selectUser(dialog.id,dialog.user,index)">
      <div class="contact-card__data">
        <div class="contact-card__data--text">
          <p class="username">{{dialog.fullname}}</p>
          <p class="last--massage" v-html="dialog.message"></p>
        </div>
      </div>
    </div>

when calling the `selectUser` method, I load the messages of the selected dialog

selectUser(id,user,x,avatar, fullname){
        this.dialogSelect  = id;
        this.userSelect.id  = user;
        this.dialogIndex  = x;
          axios.post('/profile/dialogs/messages',{
              dialog_id: id,
              offset: this.offset,
              limit: this.limit
          })
              .then((response) => {
                  this.messages = response.data.messages;
                  setTimeout(() => {
                      $('.chat--messages__wrapper').scrollTop($('.chat--messages__wrapper').prop('scrollHeight') + 25);
                  }, 500)
              })
              .catch(error => {});
      },

loading data into block

<ul class="chat--messages__wrapper" v-if="messages.length > 0" >
            <li class="chat--messages__item" v-for="(message,index) in messages">
                    <p class="last--massage" v-html="message.replay"></p>
                </div>
            </li>
        </ul>

how to display the scroll position in the `onScroll` event, it doesn’t work like that

created () {
        window.addEventListener('scroll', this.onScroll);
    },
    destroyed () {
        window.removeEventListener('scroll', this.onScroll);
    },
    onScroll(event){
        console.log(window.scrollY);
        console.log(window.scrollX);
    }

Answer 1

So if you have a scroll not on the window, but in the inner element, then on it you need to call:
console.log(ChatWrapper.scrollTop);