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

我有一个带有切换按钮的侧面板，用于窄/宽视野。
切换时，如果滚动条可见（溢出），则应隐藏切换按钮

我没有直接调用

hideorshowtoglebtn

，而是添加了一个私有属性，我可以在

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();
}

@ViewChild（'content'）私有mainContentDiv:ElementRef；
onSidebarToggleClick（）{
this.largeSidebar=！this.largeSidebar；
this.sidebarToggled=true；
}
ngAfterViewChecked（）{
如果（此.sidebarToggled）{
this.hideorshowtoglebtn（）；
}
}
hideOrShowToggleBtn（）{
让元素=this.mainContentDiv.nativeElement；
让style=element.ownerDocument.defaultView.getComputedStyle（element，未定义）；
让hasScrollbar=（style.overflowY=='auto'&&element.clientHeight

html:

简化扑救器：

---

经过一段时间的尝试——一切都归结为CSS3动画——angular没有意识到这一点。我有一个0.4s的转换，所以dom实际上在事件发生后更新了0.4s

为了解决这个问题，我切换到角度动画，作为一个简单的指南：

简言之：

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'

然后更新我的单击处理程序中的

状态

属性值

[@slidePanel]='state'