Angular div 在 div 内的 6 个轨道滚动位置

Question

我正在尝试创建一个指令来跟踪它所放置的元素的 Y 位置 - 当这个元素到达 parent div 的顶部时，我将添加粘性样式到使 header 保持在顶部，直到整个元素滚动完毕。

我试图跟踪滚动，但除了最初的 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);
    }   
}

我错过了什么？

Answer 1

HostListener 仅监听 [stickyHeaderDirective] 元素上发生的 scroll 事件。该元素必须是触发 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

Answer 2

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

 #scrollMe [scrollTop]="scrollMe.scrollHeight"

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

Angular div 在 div 内的 6 个轨道滚动位置

Angular 6 track scroll position of div within div

angular

scroll

angular2-directives