Question

我有一个非常简单的应用程序，它包含两个组件：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的{{1}}事件并做出相应的响应：

scroll

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

您可以使用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>

Answer 4

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
}

Answer 5

我试图做一些事情，我只需要调用一个变量或函数来获取任何组件中的窗口滚动位置。所以为了实现这一点，我最终使用了 mixin。这是我的代码。我正在使用 nuxt。

在插件内部创建一个文件，例如。滚动位置.js

import Vue from 'vue'

Vue.mixin({
    data() {
        return {
            scrollPosition: window.scrollY
        }
    },
    methods: {
        get_scroll_position() {
            window.addEventListener('scroll', () => {
                this.scrollPosition = window.scrollY;
            });
            return this.scrollPosition
        }
    }
})

在 nuxt.config.js 中

plugins:['@/plugins/scroll-position.js']

现在你可以在任何你想要的组件中使用 get_scroll_position() 像这样

:class="{'header_sticky':get_scroll_position()>=80}"

观看window.scroll在Vuejs中的更改

5 个答案: