div内div的角度6轨道滚动位置答案

【问题标题】：Angular 6 track scroll position of div within divdiv内div的角度6轨道滚动位置
【发布时间】：2019-04-18 16:01:58
【问题描述】：

我正在尝试创建一个指令来跟踪它所在元素的 Y 位置 - 当该元素到达父 div 的顶部时，我将添加粘性样式以使标题始终保持在顶部直到整个元素已滚动。

我尝试跟踪滚动，但除了初始 ngoninit 日志之外无法获得任何输出：

import { Directive, OnInit, ElementRef, HostBinding, HostListener } from '@angular/core';

@Directive({
    /* tslint:disable-next-line:directive-selector */
    selector: '[stickyHeaderDirective]'
})
export class StickyHeaderDirective implements OnInit {


    ngOnInit() {
        console.log('lets track ths scroll');
    }

    constructor() {}

    @HostListener('scroll', ['$event']) private onScroll($event: Event): void {
        console.log($event.srcElement.scrollLeft, $event.srcElement.scrollTop);
    }   
}

我错过了什么？

【问题讨论】：

标签： angular scroll angular2-directives

【解决方案1】：

HostListener 只监听scroll 发生在[stickyHeaderDirective] 元素上的事件。该元素必须是触发 scroll 事件的元素。

确保[stickyHeaderDirective] 元素具有正确的CSS 样式以允许其滚动。这是一个演示，展示了使用和不使用 CSS 样式的区别。

for (let element of document.getElementsByClassName('track-scrolling')) {
  element.addEventListener('scroll', e => {
      console.log(e.target.scrollLeft, e.target.scrollTop);
  });
}

.container {
  height: 200px;
  width: 200px;
  overflow: auto;
  margin: 10px;
  border: 1px solid;
}

.big-content {
  height: 1000px;
  width: 1000px;
}

.track-scrolling.wrong {
  /*
  No overflow property
  No height/width or max-height/width
  */
  color: red;
}

.track-scrolling.right {
  overflow: auto;
  max-height: 100%;
  
  color: green;
}

<div class="container">
  <div class="track-scrolling wrong">
  I won't fire scroll events
    <div class="big-content"></div>
  </div>
</div>

<div class="container">
  <div class="track-scrolling right">
  I will fire scroll events
    <div class="big-content"></div>
  </div>
</div>

这是一个演示，显示了与您的指令相同的行为：https://stackblitz.com/edit/angular-kqvraz

【讨论】：

太棒了-感谢您提供如此详细的答案！帮助很大
Event.srcElement 现在已弃用；改用 Event.target。

【解决方案2】：

如果您只需要向下滚动，请将其添加到您的 div 中

 #scrollMe [scrollTop]="scrollMe.scrollHeight"

   <div class="my-list" #scrollMe [scrollTop]="scrollMe.scrollHeight">
   </div>

【讨论】：