Как отслеживать scroll?

180

02 сентября 2018, 06:30

Как отследить scroll во vue? Вот смотрите, есть div.header.uk-container с высотой 50px, когда пользователь опуститься ниже чем на 100px к div.header.uk-container добавиться класс headerAfter, как такое сделать? Главное, покажите как отследить изменения scroll'a остальное сам, пожалуйста, помогите.

Answer 1

Нашел решение: к div'у добавляем такой атрибут v-on:scroll="onScroll" Далее создаем метод onScroll

onScroll(event){
//делаем какие-то действия во время прокрутки
}

И еще создаем эти два хука:

created () {
    window.addEventListener('scroll', this.onScroll);
},
destroyed () {
    window.removeEventListener('scroll', this.onScroll);
},

Answer 2

Мне больше нравится запись: @scroll="functionName" на любом блоке. Работает, как часы и выглядит в духе vue, без костыльных ивентов на window (вообще не понятно зачем ты их юзаешь).