Событие прокрутки не запускается в Angular-6

Question

Я знаю, что этот вопрос задавался ранее, но ни одно из решений не помогло мне.

Я работаю над проектом Angular-6.Я пытаюсь получить событие Window-Scroll в одном из компонентов с именем SectionComponent .

Стили тегов html и body :

html, body {
    overflow: auto;
    position: relative;
    margin: 0;
    height: 100%;
}

Ниже приведена иерархия компонентов , которая объясняет, как компоненты управляются.

My AppComponent :

HTML:

<div id="wrapper">
    <router-outlet></router-outlet>  
</div>

CSS:

#wrapper {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: auto;
}

app.component.ts:

  @HostListener('window:scroll', [])
  onWindowScroll() {
    console.log('scroll');
  }

AppComponent загружает компонент с именем HomeComponent в тег router-outlet .Этот HomeComponent загружает SectionComponent , используя селектор.

My HomeComponent:

HTML:

<div class="home-wrapper">
  <div> 
    <!-- Some content more that window height -->
  </div>
  <app-section></app-section>
</div>

CSS:

.home-wrapper {
    position: relative;
    overflow-y: auto;
    height: 100%;
}

home.component.ts:

  @HostListener('window:scroll', [])
  onWindowScroll() {
    console.log('scroll');
  }

My SectionComponent

HTML:

<div class="section-wrapper">
  <!-- Some content more than window height -->
</div>

CSS:

.section-wrapper {
  position: relative;
  height: 2241px;
}

section.component.ts:

  @HostListener('window:scroll', [])
  onWindowScroll() {
    console.log('scroll');
  }

Я хочу использовать Window-Scroll только в SectionComponent .Но ни один из компонентов не запускает событие.Что я делаю не так?

Answer 1

Я отвечаю на мой вопрос здесь.

Я на самом деле все заработало.После еще одного исследования этой же проблемы я понял, что для получения события прокрутки окна фактическим элементом прокрутки должен быть документ (означает тело HTML) .

My HomeComponent является потомком тела , а также прокручиваемым .Вот почему это не было событие прокрутки окна.

Изменения, которые я применил, чтобы заставить его работать:

AppComponent CSS :

#wrapper {
    width: 100vw;
    height: 100vh;
    position: relative;
}

HomeComponent CSS:

.home-wrapper {
    position: relative;
}

Answer 2

В вашем SectionComponent после объявления класса просто используйте

@HostListener('window:scroll', ['$event']) onScrollEvent($event){

var element =  document.getElementsByClassName('section-wrapper')[0];
var rect =   element.getBoundingClientRect();
 // the above code will return the CSS border-boxe associated with the element.
// so on scroll you will have readonly left, top, right, bottom, x, y, width, and height properties .
//on behalf of these properties you can manipulate the DOM section-wrapper div.

}