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

Question

我正在使用vueJs和bootstrap创建一个webapp .我想在特定数量的滚动之后更改元素的CSS类,是否有一些vue方式.

我想要以下内容:

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

我找到的一个选项是使用vue-scroll,这看起来很有希望但不起作用.

还有其他一些原生的方式来实现同样的目标吗？

Answer 1

你可以尝试这样做

const app = new Vue({

  el: '#app',

  data: {
    scrollPosition: null
  },

  methods: {
    updateScroll() {
      this.scrollPosition = window.scrollY
    }
  },

  mounted() {
    window.addEventListener('scroll', this.updateScroll);
  }

})

您还可以在destroy上删除eventListener,如下所示:

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