Javascript Angular2-Can'；无法检测滚动事件

我试图在向下滚动时修复一个div；为此，我从下面的代码开始，我面临一些奇怪的问题，阻止我检测滚动行为。在下面的代码

控制台上，向下滚动时不会打印日志（“大于50”）

知道为什么我无法检测到滚动事件吗

@Component({
templateUrl: 'outlet.html',
selector: "app-layout-nav"
})


export class place {


  constructor(@Inject(DOCUMENT) private document: Document) {}

  @HostListener("window:scroll", [])

  onWindowScroll() {
    let number = this.document.body.scrollTop;
    if (number > 50) {
    console.log('bigger than 50')
    this.navIsFixed = true;
   } else if (this.navIsFixed && number < 10) {
      console.log('lower than 50')
      this.navIsFixed = false;
    }
  }

}

@组件({
templateUrl:'outlet.html'，
选择器：“应用程序布局导航”
})
出口舱位{
构造函数（@Inject（DOCUMENT）private-DOCUMENT:DOCUMENT）{}
@HostListener（“窗口：滚动”，[]）
onWindowScroll（）{
让number=this.document.body.scrollTop；
如果（数量>50）{
console.log（'大于50'）
this.navIsFixed=true；
}else if（this.navIsFixed&&number<10）{
console.log（'低于50'）
this.navIsFixed=false；
}
}
}

Outlet.html

 <div>

 <div id="wrap" [class.fixed]="navIsFixed">
  This should be fixed when it reaches a certain level</div>

  <div>The rest of the long page should show here</div>

 </div>

当达到某一水平时，应将其固定
长页面的其余部分应显示在此处

这可能有助于检测元素或窗口上的滚动事件

安装

• 与NPM

  npm安装ngx滚动事件--保存

• 用纱线

  纱线添加ngx滚动事件

用法 导入ScrollEvent并将其添加到模块的导入数组中

// app.module.ts
import { ScrollEventModule } from 'ngx-scroll-event';

@NgModule({
  imports: [
    ...,
    ScrollEventModule,
    ...,
  ]
})
export class AppModule { }

现在，您可以在模板中向任何元素添加

检测滚动

属性和

（onScroll）

事件。 您还可以添加

[bottomofest]

以更改到达底部时的警报是否为真，默认值为100，该值应为以像素为单位的数字

// app.awesome.component.ts

...
import { ScrollEvent } from 'ngx-scroll-event';
...

@Component({
   ...
   template: `...
        <div detect-scroll (onScroll)="handleScroll($event)" [bottomOffest]="200">
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
        <div>
   ...`,
})
export class AwesomeComponent {
  public handleScroll(event: ScrollEvent) {
    console.log('scroll occurred', event.originalEvent);
    if (event.isReachingBottom) {
      console.log(`the user is reaching the bottom`);
    }
    if (event.isWindowEvent) {
      console.log(`This event is hapening on Window not on an element.`);
    }

  }
}

//app.awesome.component.ts
...
从“ngx滚动事件”导入{ScrollEvent}；
...
@组成部分({
...
模板：`。。。
呜呜呜呜
呜呜呜呜
呜呜呜呜
呜呜呜呜
呜呜呜呜
呜呜呜呜
呜呜呜呜
呜呜呜呜
呜呜呜呜
...`,
})
导出类组件{
public handleScroll（事件：ScrollEvent）{
console.log（'发生滚动'，event.originalEvent）；
if（event.isReachingBottom）{
log（`用户正在到达底部'）；
}
if（event.isWindowEvent）{
log（`此事件发生在窗口上，而不是元素上。`）；
}
}
}

这可能有助于检测元素或窗口上的滚动事件

安装

• 与NPM

  npm安装ngx滚动事件--保存

• 用纱线

  纱线添加ngx滚动事件

用法 导入ScrollEvent并将其添加到模块的导入数组中

// app.module.ts
import { ScrollEventModule } from 'ngx-scroll-event';

@NgModule({
  imports: [
    ...,
    ScrollEventModule,
    ...,
  ]
})
export class AppModule { }

现在，您可以在模板中向任何元素添加

检测滚动

属性和

（onScroll）

事件。 您还可以添加

[bottomofest]

以更改到达底部时的警报是否为真，默认值为100，该值应为以像素为单位的数字

// app.awesome.component.ts

...
import { ScrollEvent } from 'ngx-scroll-event';
...

@Component({
   ...
   template: `...
        <div detect-scroll (onScroll)="handleScroll($event)" [bottomOffest]="200">
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
            <div>Bla bla bla</div>
        <div>
   ...`,
})
export class AwesomeComponent {
  public handleScroll(event: ScrollEvent) {
    console.log('scroll occurred', event.originalEvent);
    if (event.isReachingBottom) {
      console.log(`the user is reaching the bottom`);
    }
    if (event.isWindowEvent) {
      console.log(`This event is hapening on Window not on an element.`);
    }

  }
}

//app.awesome.component.ts
...
从“ngx滚动事件”导入{ScrollEvent}；
...
@组成部分({
...
模板：`。。。
呜呜呜呜
呜呜呜呜
呜呜呜呜
呜呜呜呜
呜呜呜呜
呜呜呜呜
呜呜呜呜
呜呜呜呜
呜呜呜呜
...`,
})
导出类组件{
public handleScroll（事件：ScrollEvent）{
console.log（'发生滚动'，event.originalEvent）；
if（event.isReachingBottom）{
log（`用户正在到达底部'）；
}
if（event.isWindowEvent）{
log（`此事件发生在窗口上，而不是元素上。`）；
}
}
}

您可以将滚动事件绑定到您的容器：

<div class="container" (scroll)="onScroll($event)">
  <div class="scrollable_content">
  </div>
</div>

---

您可以将滚动事件绑定到容器：

<div class="container" (scroll)="onScroll($event)">
  <div class="scrollable_content">
  </div>
</div>

---

您需要在滚动的div上进行监听，而不是在窗口上<代码>窗口：滚动仅用于滚动整个页面时。我们需要看到指向的HTML和指向应该滚动的元素的指针。@GünterZöchbauer，我已经发布了其余的代码。基本上，我认为它应该是

window:scroll

，因为用户应该滚动窗口，并且该窗口上的特定

div

在达到一定的滚动级别后将

固定。如果我错了，请纠正我。我不知道你是否错了。如果页面正在滚动，则您的
@HostListener（）
应该捕获滚动事件，如果没有，则不会。问题是
@HostListener（）
没有捕获滚动事件。我看不到从您发布的代码中诊断滚动事件的方法。您能创建重现问题的Plunker吗？您需要在滚动的div上进行监听，而不是在窗口上<代码>窗口：滚动

仅用于滚动整个页面时。我们需要看到指向的HTML和指向应该滚动的元素的指针。@GünterZöchbauer，我已经发布了其余的代码。基本上，我认为它应该是

window:scroll

，因为用户应该滚动窗口，并且该窗口上的特定

div

在达到一定的滚动级别后将

固定。如果我错了，请纠正我。我不知道你是否错了。如果页面正在滚动，则您的
@HostListener（）
应该捕获滚动事件，如果没有，则不会。问题是
@HostListener（）
没有捕获滚动事件。我看不到从您发布的代码中诊断滚动事件的方法。你能创造出重现问题的Plunker吗？