Angular div 在 div 内的 6 个轨道滚动位置
Angular 6 track scroll position of div within div
我正在尝试创建一个指令来跟踪它所放置的元素的 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);
}
}
我错过了什么?
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
如果您只需要向下滚动,请将此添加到您的 div
#scrollMe [scrollTop]="scrollMe.scrollHeight"
<div class="my-list" #scrollMe [scrollTop]="scrollMe.scrollHeight">
</div>
我正在尝试创建一个指令来跟踪它所放置的元素的 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);
}
}
我错过了什么?
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
如果您只需要向下滚动,请将此添加到您的 div
#scrollMe [scrollTop]="scrollMe.scrollHeight"
<div class="my-list" #scrollMe [scrollTop]="scrollMe.scrollHeight">
</div>