Vue 2 - 滚动事件不起作用

Question

我试图在vue组件中听滚动事件,但是当我试图像这样设置它时:

<div id="app"
     :class="{'show-backdrop': isLoading || showBackdrop}"
@scroll="handleScroll">

然后在方法中:

  handleScroll () {
    const header = document.querySelector('#header');
    const content = document.querySelector('#content');
    const rect = header.getBoundingClientRect();
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    const headerTop = rect.top + scrollTop;

    if (rect.top <= 0) {
      header.classList.add('fixed');
      content.classList.add('content-margin');
    } else {
      header.classList.remove('fixed');
      content.classList.remove('content-margin');
    }
  }

那不行.我不得不做这样的解决方法:

beforeMount () {
  window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy () {
  window.removeEventListener('scroll', this.handleScroll);
}

为什么第一种方法不起作用,应该是Vue的做事方式？

Answer 1

您最初的设置：

<div id="app"
     :class="{'show-backdrop': isLoading || showBackdrop}"
@scroll="handleScroll">

只会检测该 div 上的滚动。该 div 需要首先可滚动overflow:scroll;或类似的东西，然后当您在该 div 内滚动时，将触发 handleScroll。

您在 javascript 中设置的是监听window元素上的滚动。这将在您滚动页面时触发。您所做的对于检测窗口上的滚动事件是正确的，但是请记住，只要该组件处于活动状态，这些事件才会被注册。