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

#javascript #vuejs

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

Ответы

Ответ 1

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

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


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

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


Ответ 2

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