事件處理程序中的滾動條可見性檢測

我有一個帶有用於窄/寬視圖的切換按鈕的側面板。
開啓時，如果滾動條變得可見（溢出），它應該隱藏切換按鈕。事件處理程序中的滾動條可見性檢測

不是直接調用hideOrShowToggleBtn的，我補充說，我可以在ngAfterViewChecked用於調用一次每個事件和觀點得到了更新後（希望）私有財產。

但是，如果我切換到縮小視圖和滾動條變得可見 - element.clientHeight element.scrollHeight是相同的，滾動條未檢測到。
可能是因爲ngAfterViewChecked過早起火。

會有更好的方法來檢測它，並確保dom是最新的，我沒有檢查滾動條實際添加之前的舊視圖嗎？

@ViewChild('content') private mainContentDiv: ElementRef; 

onSidebarToggleClick() { 
    this.largeSidebar = !this.largeSidebar; 
    this.sidebarToggled = true; 
} 

ngAfterViewChecked() { 
    if (this.sidebarToggled) { 
     this.hideOrShowToggleBtn(); 
    } 
} 

hideOrShowToggleBtn() { 
    let element = this.mainContentDiv.nativeElement; 

    let style = element.ownerDocument.defaultView.getComputedStyle(element, undefined); 
    let hasScrollbar = (style.overflowY === 'auto' && element.clientHeight < element.scrollHeight); 
    this.hideToggle = !hasScrollbar && !this.largeSidebar; 
    this.sidebarToggled = false; 
    this.changeDetectorRef.detectChanges(); 
}

HTML：

 <div class="sidebar-header"> 
      <i class="sidebar-header-toggle fa fa-2x cursor" 
       (click)="onSidebarToggleClick()" 
      ></i> 
     </div> 
     <div #content [ngClass]="{'sidebar-large': largeSidebar, 'sidebar-small': !largeSidebar }"> 

     </div>

簡體Plunker： https://plnkr.co/edit/tv2quvCmzElZzidiRjTZ?p=preview

來源

2017-03-28 Agony

相當長一段時間的努力之後 - 這一切來到了CSS3動畫 - 角是沒有意識到這一點。我有一個0.4s的過渡，所以dom實際上在比賽結束後0.4秒更新。

爲了解決這個問題，我切換到角的動畫，一個簡單的指南： https://coursetro.com/posts/code/25/Understanding-Angular-2-Animations-Tutorial

簡而言之：

import { trigger, state, style, transition, animate, keyframes } from '@angular/animations'; 

animations: [ 
    trigger('slidePanel', [ 
     state('small', style({ 
      width: '300px' 
     })), 
     state('large', style({ 
      width: '570px' 
     })), 
     transition('small => large', animate('400ms ease-in')), 
     transition('large => small', animate('400ms ease-out')) 
    ]), 
]

並將其加入到我的DIV我想動畫：

[@slidePanel]='state'

然後更新我的點擊處理程序中的state屬性值。

來源

2017-03-28 13:41:45 Agony

事件處理程序中的滾動條可見性檢測

回答

相關問題