2017-12-13 1 views
0

사용자가 특정 위치로 스크롤하면 각도 애니메이션을 적용하기 위해 스크롤 위치를 감시하는 HostListener가 있습니다. 사용자가 스크롤 할 때 HostListener에 연결된 메소드가 실행됩니다. 사용자가 스크롤을 멈 추면이 메소드는 console.log 출력에 표시된 것처럼 실행을 중지합니다.각도 4의 HostListener의 윈도우 : 스크롤이 멈 추면 스크롤이 계속됩니다.

@HostListener('window:scroll', ['$event']) 
checkScroll(evt) 
{ 
    const scrollPosition = window.pageYOffset 

    if (scrollPosition >= 750) { 
     this.SiteNavigationState = 'dark' 
    } 
    else 
    { 
     this.SiteNavigationState = 'translucent' 
    } 

    console.log('checkScroll', scrollPosition); 
} 

왜이 방법을 수행 Y 값 1608 (window.pageYOffset) 과거 사용자가 스크롤이 HostListener에 부착 된 방법은 다시 여기

1608 이상 사용자가 스크롤 할 때까지 지속적으로 발사한다면, 내 코드입니다 1608의 window.pageYOffset 이후에 지속적으로 발생하지만 사용자가 window.pageYOffset 1608보다 위로 스크롤하면 실행이 중지됩니다.

이 문제는 Chrome에서만 발생합니다. HostListener에 첨부 된 메소드는 Firefox에서 예상대로 작동합니다.

답변

0

실제 문제가 발견되었습니다. 비슷한 UI 요소가 표시된 높이의 차이를 고려하여 matchHeight라는 지시문을 사용하여 표시되는 내용의 길이 차이를 고려해야합니다. matchHeight는 모든 변경 감지 후에 실행되는 ngAfterViewChecked를 사용합니다. matchHeight는 물리적으로 dom 요소의 높이를 변경합니다. 특정 Y 위치 다음에 요소의 물리적 높이를 변경하면 완전히 다른 지시문에서 HostListener가 끝없이 발생합니다.

내가 곤혹 스럽다.

관련 문제