Смотреть window.scrollY изменения в Vuejs

Question

У меня очень простое приложение, которое состоит из 2 компонентов: App.vue и другого компонента, Home.vue, где я храню остальную часть структуры приложения: липкий заголовок и несколько разделов с якорями для прокрутки.

Я хочу применить класс к закрепленному заголовку, чтобы минимизировать логотип во время прокрутки страницы.Поэтому я подумал, что буду следить за любыми изменениями в window.scrollY.Поэтому, если scrollY больше 0, примените некоторый класс, который минимизирует логотип.

Я попытался прослушать события прокрутки в моем компоненте, но это не зашло слишком далеко.В этом обсуждении здесь представлено очень хорошее решение, но я не знаю, где разместить событие прокрутки.https://github.com/vuejs/Discussion/issues/324

Итак, я подумал, что наиболее подходящим решением будет создание свойства данных, присвоение ему значения window.scrollY и последующее наблюдение за изменениями его значения.К сожалению, наблюдатель никогда не срабатывает.Так что теперь я застрял.Код:

data () {
return {
  ...
  windowTop: window.top.scrollY
 }
}
...
watch: {
 windowTop: {
  immediate: true,
  handler (newVal, oldVal) {
    console.log(newVal, oldVal);
  },
 }
}

Есть идеи, что я могу делать не так?

Answer 1

window свойства не могут быть использованы таким образом.Вместо этого вам нужно будет прослушать событие window scroll и ответить соответствующим образом:

mounted() {
  window.addEventListener("scroll", this.onScroll)
},
beforeDestroy() {
  window.removeEventListener("scroll", this.onScroll)
},
methods: {
  onScroll(e) {
    this.windowTop = window.top.scrollY /* or: e.target.documentElement.scrollTop */
  }
}

Answer 2

Вы можете использовать метод mounted() для добавления прослушивателя событий в объект окна следующим образом:

var p = new Vue({
   el: "#app",
   data(){
      return {
          windowTop: 0
      };
   },
   mounted()
   {
       var that = this;
       window.addEventListener("scroll", function(){
           that.windowTop = window.scrollY;
       });
   },
   template: "<div style='height: 250vh'><div style='position: fixed; right: 0; top: 0'>{{windowTop}}</div></div>"
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>