Question

我有以下代码片段可以在Chrome，Edge上正常使用，但在IE 11和Firefox的某些版本上效果不佳。

在IE 11的某些版本中，并不总是设置类，而在Firefox上它有一些延迟。

任何想法如何做得更好？

// TS

this.scrollYSub = Observable.fromEvent(window, 'scroll')
    .throttleTime(5)
    .subscribe(e => {
        this.scrollY = window.scrollY || document.documentElement.scrollTop;
});

// HTML

<nav id="nav" [class.fixednav]="scrollY >= 245">

/ * CSS * /

.fixednav {
    position: fixed;
    top: 95px;
}

Answer 1

据我所知，由于polyfills的限制，滚动事件不会在所有浏览器的Angulars区域内运行。

constructor(private cdRef:ChangeDetectorRef /* or private zone:NgZone */) {}

this.scrollYSub = Observable.fromEvent(window, 'scroll')
    .throttleTime(5)
    .subscribe(e => {
        this.scrollY = window.scrollY || document.documentElement.scrollTop;
        this.cdRef.detectChanges();

        // or
        /*
        this.zone.run(() {
          this.scrollY = window.scrollY || document.documentElement.scrollTop;
        });
        */
});

如果代码只更改当前组件的本地属性，this.cdRef.detectChanges();通常是更好的方法。

如果代码还调用导致其他组件或服务发生更改的方法，则首选zone.run(...)方法，因为它在整个应用程序中运行更改检测，而不是仅在当前组件中运行。

另一种方式是

scroll = new Subject();

@HostListener('window:scroll', ['$event'])
onScroll(event) {
  this.scroll.next(event);
}

因为这种方式可以确保在Angulars区域内执行事件处理程序。

Answer 2

默认应用CSS并隐藏元素。如果条件适用，则显示元素（或应用将显示它的类）。然后你不会在页面加载期间跳转。

条件类并不总是在Angular 2上触发

2 个答案: