Html VueJS：如何在滚动位置后动态更改CSS类

我正在使用vueJs和创建一个webapp。我想在一个特定数量的滚动元素之后，看看是否有一些vue方法可以做到这一点

我想要像下面这样的东西：

<div :class="{classA: scrollPosition < 100, classB: scrollPosition > 100}">
</div>

我发现的一个选择是使用，这似乎很有希望，但是

---

还有其他的本土方法可以达到同样的效果吗？

你可以试着这样做

const app = new Vue({
  
  el: '#app',
  
  data: {
    scrollPosition: null
  },
  
  methods: {
    updateScroll() {
      this.scrollPosition = window.scrollY
    }
  },
  
  mounted() {
    window.addEventListener('scroll', this.updateScroll);
  }
  
})

您还应该考虑在组件被销毁时移除事件侦听器，以防止泄漏：

destroy() {
  window.removeEventListener('scroll', this.updateScroll)
}

---

这对你有用吗？@BelminBedak如果vue没有提供任何现成的东西，这将有效，但可能没有，请将此作为答案发布。