html - VueJS : How to dynamically change a CSS class after a scroll position

Question

我正在使用 vueJs 和 bootstrap 创建一个网络应用程序.我要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)
}