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

Question

我正在使用 vueJs 和 bootstrap 创建一个 webapp。我想change CSS class一个元素经过一定量的滚动后，有没有一些vue方法可以做到这一点。

我想要以下内容：

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

我发现的一个选项是使用vue-scroll，这似乎很有希望，但not working。

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

Answer 1

你可以试试这样

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)
}