Javascript Vue：滚动侦听器问题

我已经开始使用Vue CLI，但遇到了处理窗口滚动位置的问题

只是从Vue文档中复制，但不起作用

这是我的

Nav.vue

组件：

<template>
   <nav v-scroll="handleScroll"></nav>
</template>

<script>
export default {
   name: 'my-nav',
   data() {
      return {
         scrolled: false
      }
   },
   directives: {
      scroll: {
         inserted: function (el, binding) {
            let f = function (evt) {
               if (binding.value(evt, el)) {
                  window.removeEventListener('scroll', f)
               }
            }
         }
      }
   },
   methods: {
      handleScroll: function (evt, el) {
         if (window.scrollY > 50) {
            el.setAttribute(
               'style',
               'opacity: .5; background-color: red;'
            )
         }
         return window.scrollY > 100
      }
   }
}
</script>

<style lang="scss" scoped>
   nav {
      position: fixed;
      width: 100%;
      height: 68px;
      background-color: white;
      z-index: 100;
   }
</style>

我还搜索了其他处理滚动事件的方法，但没有一种有效

在这种情况下，

handleScroll

方法被忽略：

<template>
   <nav v-bind:class="{ hidden: scrolled}"></nav>
</template>

<script>
export default {
   name: 'my-nav',
   data() {
      return {
         scrolled: false
      }
   },
   methods: {
      handleScroll: function () {
         this.scrolled = window.scrollY > 150;
      }
   },
   created: function () {
      window.addEventListener('scroll', this.handleScroll);
   },
   destroyed: function () {
      window.removeEventListener('scroll', this.handleScroll);
   }
}
</script>
<style>
.hidden {
  opacity: .3;
}
</style>

导出默认值{
姓名：'我的导航'，
数据（）{
返回{
滚动：false
}
},
方法：{
handleScroll:函数（）{
this.scrolled=window.scrollY>150；
}
},
已创建：函数（）{
window.addEventListener（'scroll'，this.handleScroll）；
},
已销毁：函数（）{
window.removeEventListener（'scroll'，this.handleScroll）；
}
}
.隐藏{
不透明度：.3；
}

在我看来，用Vue解决这些简单的问题要容易得多，但我错了

---

如何使滚动事件正常工作？

您的第二种方法应该有效，但有一点需要注意：您没有正确设置组件数据中的

滚动

：您应该使用

此方法。滚动的
，即：

handleScroll: function () {
   this.scrolled = window.scrollY > 150;
}

请参见概念验证示例：


newvue({
el:“#应用程序”，
数据（）{
返回{
滚动：false
}
},
方法：{
handleScroll:function（）{
this.scrolled=window.scrollY>150；
}
},
已创建：函数（）{
window.addEventListener（'scroll'，this.handleScroll）；
},
已销毁：函数（）{
window.removeEventListener（'scroll'，this.handleScroll）；
}
});
正文{
最低高度：200vh；
}
导航{
位置：固定；
顶部：20px；
左：20px；
}
.隐藏{
不透明度：0.3
}

导航
对不起，我已更正了初始代码，但它无论如何都不起作用。正如我提到的，Vue只是忽略了
handleScroll
方法before@mr.boris它是这样的：除非你可以创建一个MCVE来证明其他。我已经根据您共享的代码附加了一个MCVE：它按预期工作。这再次强调了为什么我们要提出问题，以包含问题的最小、具体和可验证的示例的重要性。我明白了，也许它不适用于Vue CLI和webpack。我仔细检查了一切。另外，docs的第一个官方方法也不起作用。你确定你的页面/正文是可滚动的元素吗？非常感谢，问题在于正文高度限制。我甚至没想过。真的很抱歉。
handleScroll: function () {
   this.scrolled = window.scrollY > 150;
}