观看window.scroll在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

对我来说，以上都没有奏效。

我必须true在添加/删除滚动侦听器中作为第三个参数传递：

mounted() {
  window.addEventListener("scroll", this.onScroll, true)
},
beforeDestroy() {
  window.removeEventListener("scroll", this.onScroll, true)
},
methods: {
  onScroll(e) {
    this.windowTop = e.target.scrollTop;
  }
}

第三个参数：您应该能够使用第三个参数为 true 的文档级侦听器来捕获所有元素上的滚动事件。这是它的样子：

document.addEventListener('scroll', function(e){ }, true);

最后的 true 是重要的部分，它告诉浏览器在调度时捕获事件，即使该事件通常不会冒泡，如更改、焦点和滚动。

Answer 3

2020 更新：

用于@scroll.passive观察组件中任何元素的滚动：

例子：

模板

<div class="room_message-stream" @scroll.passive="handleScroll">
      <ul class="room_message-stream__list">
        <li class="room_message-stream__list-item">...</li>
      </ul>
</div>

方法：

handleScroll (e) {
  var scrollPos = e.target.scrollTop
}