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元素上的滚动。每当您滚动页面时，都会触发此操作。您所做的操作对于检测窗口上的滚动事件是正确的，但是请记住，只有在此组件处于活动状态时，才会注册这些事件。

Vue 2 - 滚动事件不起作用

1 个答案: