事件处理程序中的滚动条可见性检测

我有一个带有用于窄/宽视图的切换按钮的侧面板。
开启时，如果滚动条变得可见（溢出），它应该隐藏切换按钮。事件处理程序中的滚动条可见性检测

不是直接调用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

事件处理程序中的滚动条可见性检测

回答

相关问题