帶滾動條的iframe =不引發滾動事件（angular2）

我有一個angular2應用程序，它有一個標題，內容在iframe中。我禁用CSS文件內的窗口滾動條：html {overflow-y：hidden;}，我的目標是通過動畫實現粘貼標題。帶滾動條的iframe =不引發滾動事件（angular2）

我嘗試了一些選項，但在我看來他們都不fireing /聽iframe的滾動事件（窗口或doscument滾動事件沒有問題fireing，但我並不需要它）：

選項1（當我嘗試，而不是（滾動（負載）），它的工作原理）：

<iframe src=".." scrolling="yes" (scroll)="iframeScrollHandler(event)">..</iframe>

選項2：

@ViewChild('iframe') iframe: ElementRef; 
constructor(@Inject(DOCUMENT) private document: Document, private window: Window, private renderer:Renderer) { 
    } 

    ngAfterViewInit(){ 
    this.renderer.listen(this.iframe.nativeElement, 'scroll', (event) => { 
     console.log('scroll scroll..'); 
    }) 

    }

你知道爲什麼滾動事件不fireing？

來源

2017-01-02 user3287019

您可能已經找到了解決方案，但我最近發現了這個問題，最近發現這個問題沒有答案。關鍵似乎是您註冊事件通知時的時間。在iframe的onload事件觸發後，您必須註冊滾動事件。在我的代碼中，我在模板代碼中註冊了iframe的onload事件。

<form ngNoForm action="/logout" method="post" role="form"> 
    <div class="container-fluid main"> 
     <iframe #tframe [src]="src" class="frame" (load)="onFrameLoad()"> </iframe> 
     <div class="clearfix"> 
      <div class="pull-right"> 
       <button type="submit" class="btn btn-dialog-secondary">{{'common.decline' | i18n}}</button> 
       <button type="button" [disabled]="!scrollBottom" id="defaultFocus" class="btn btn-primary" (click)="accept()">{{'common.accept' | i18n}}</button> 
      </div> 
     </div> 
    </div> 
</form>

在類本身我的iframe ElementRef成員（如藏漢，我想響應滾動事件更新，後來更多在這個答案的布爾成員..）。

export class RouteFrame implements AfterViewInit { 
    scrollBottom: boolean = false; 
    @ViewChild('tframe') frame : ElementRef; 

    scroll$: any = null;

}在RouteFrame類寄存器滾動事件的onFrameLoad（）方法

然後。

onFrameLoad() { 

    this.scroll$ = Observable.fromEvent(this.frame.nativeElement.contentWindow, 'scroll') 
     .debounceTime(200) 
     .subscribe((evt: any) => { 
      this.onScroll(); 
     }); 
}

然後在onScroll（）方法中，執行所需的任何邏輯。在我看來，當用戶滾動到iframe的底部。但是我發現滾動事件正在Angular的「外部」發生，所以表單由Angular對該變量值的變化進行了重新評估，因此即使它的有[禁用] =「！scrollBottom」作爲其聲明的一部分。因此，爲什麼scrollBottom變量的更新被封裝在this.zone.run（）中。

onScroll() { 

    if (this.frame.nativeElement.contentWindow.scrollY > this.frame.nativeElement.contentWindow.innerHeight) { 
     this.zone.run(() => { 
      this.scrollBottom = true; 
     }); 
    } 
}

this.zone只是像其他Angular提供程序一樣注入到RouteFrame類的cstr中。

constructor(@Inject(NgZone) private zone: NgZone, ....)

爲了完整性，在組件完成時取消訂閱滾動事件偵聽器。

NgOnDestroy() { 
    this.scroll$.unsubscribe(); 
}

角版本4.3.0

來源

2017-08-18 10:00:54 user3262600

帶滾動條的iframe =不引發滾動事件（angular2）

回答

相關問題