iframe с scrollbar = не запускает событие прокрутки (angular2)

Question

У меня есть приложение углового2, которое имеет заголовок, а содержимое находится внутри iframe. Я отключил оконную полосу прокрутки внутри файла css с помощью: html {overflow-y: hidden;}, и моя цель - получить липкий заголовок с анимацией.

Я попробовал несколько вариантов, но, по моему мнению, ни один из них fireing/прослушивания события прокрутки в фрейма (окна или 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?

Answer 1

Возможно, вы нашли решение для этого уже, но я столкнулся именно с этой проблемой недавно и нашел этот вопрос без ответа. Ключ, по-видимому, зависит от того, когда вы регистрируетесь для оповещений о событиях. Вы должны зарегистрироваться для события прокрутки после запуска события onload iframe. В моем коде я зарегистрировал событие onload iframe в своем шаблоне кода.

<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; 

}

Затем в методе onFrameLoad() класса регистра RouteFrame для события прокрутки.

onFrameLoad() { 

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

Затем в методе onScroll() выполните любую логику, в которой вы нуждаетесь. В моем случае я смотрел, когда пользователь прокручивается в нижней части iframe. Однако я обнаружил, что событие прокрутки происходило «вне» Углового, поэтому форма была переоценена Angular на изменении значения этой переменной, поэтому кнопка accept никогда не включалась, хотя у была [ disabled] = "! 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 вводится как другие угловые провайдеры в cstr класса RouteFrame.

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

Для полноты отказа от подписки на прослушиватель событий прокрутки, когда компонент завершен.

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

Угловая версия 4.3.0