javascript - 如何在 Vue 中滚动时更改 css

Question

我决定在一个项目中学习 Vue.js，但我不知道如何跟踪窗口滚动并在类似的距离后动态更改 CSS，就像我用 JQuery 做的那样:

$(window).scroll(function() {
      if($(window).scrollTop() >= 100) {
        $('header').addClass('fixed');
      } else {
        $('header').removeClass('fixed');
      }
    });

Answer 1

您可以使用 Custom Directive并将其绑定(bind)到 Vue 实例中的任何组件或元素。

假设你有一个 <div>并将你的指令命名为 on-scroll你会更新你的 div : <div on-scroll="handleScroll">其中 handleScroll是您的 Vue 实例中将要处理滚动事件的方法。

指令:

Vue.directive('on-scroll', {
  inserted: function (el, binding) {
    let f = function (evt) {
      if (binding.value(evt, el)) {
        window.removeEventListener('scroll', f)
      }
    }
    window.addEventListener('scroll', f)
  }
})

Vue 实例:

new Vue({
  el: '#el',
  methods: {
    handleScroll: (event, el) => {
       if ( window.scrollY >= 300 ) {
          el.classList.add('fixed');
       } else {
          el.classList.remove('fixed');
       }
    }
  }
});