Vue 2 - 스크롤 이벤트 리슨 중

Vue 2 - 스크롤 이벤트 리슨 중

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 방식이어야 합니다.

처음에 설정한 내용:

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

해당 디바에서만 스크롤이 감지됩니다.그 div는 먼저 스크롤이 가능해야 합니다.overflow:scroll;또는 이와 유사한 방법으로 div를 스크롤하면 handleScroll이 트리거됩니다.

javascript로 설정하는 것은, 다음의 파일을 스크롤입니다.window요소.이것은, 페이지를 스크롤 할 때마다 트리거 됩니다.창에서 스크롤 이벤트를 감지하는 작업은 올바르지만, 이러한 이벤트는 이 구성 요소가 활성 상태일 때만 등록됩니다.

언급URL : https://stackoverflow.com/questions/47091262/vue-2-on-listening-on-scroll-event