Question

我决定在一个项目上学习Vue.js，但我不知道如何跟踪窗口滚动并在经过一段相似的距离后动态更改CSS，就像我对JQuery所做的那样：

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

Answer 1

您可以使用Custom Directive并将其绑定到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');
       }
    }
  }
});

在Vue中滚动时如何更改CSS

1 个答案: