代码之家 › 专栏 › 技术社区 › user3024827

在DIV内DIV的角度6轨道滚动位置

angular2-directives scroll angular

user3024827 · 技术社区 · 6 年前

我正试图创建一个指令来跟踪它所放置元素的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);
    }   
}

我错过了什么?

1 回复 | 直到 6 年前

Alex K 6 年前

HostListener 只听 scroll 发生在 [stickyHeaderDirective] 元素。那个元素一定是触发 纸卷 事件。

确定 [StickyHeader指示] 元素具有正确的CSS样式以允许其滚动。这是一个演示,展示了CSS样式和不CSS样式之间的区别。

for (let element of document.getElementsByClassName('track-scrolling')) {
  element.addEventListener('scroll', e => {
      console.log(e.srcElement.scrollLeft, e.srcElement.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

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

1 年前

Kael · 在html表格中显示关系api数据-角度

2 年前