gpt4 book ai didi

javascript - Angular CDKScrollable 不触发

转载 作者:行者123 更新时间:2023-12-04 09:18:30 28 4
gpt4 key购买 nike

创建我自己的 div 时,我似乎无法触发 CdkScrollable Angular :

<div class="main-section" id="mainsection" #mainsection CdkScrollable>
<div class="content" style="height: 300px; background-color: red; margin-bottom: 30px; "></div>
<div class="content" style="height: 300px; background-color: red; margin-bottom: 30px;"></div>
<div class="content" style="height: 300px; background-color: red; margin-bottom: 30px;"></div>
<div class="content" style="height: 300px; background-color: red; margin-bottom: 30px;"></div>
<div class="content" style="height: 300px; background-color: red; margin-bottom: 30px;"></div>
<div class="content" style="height: 300px; background-color: red; margin-bottom: 30px;"></div>

</div>

#mainsection {
height: 400px;
display: block;
overflow-y: auto;
}
private onWindowScroll(data: CdkScrollable) {

const scrollTop = data.getElementRef().nativeElement.scrollTop || 0;
console.log(scrollTop);
if (this.lastOffset > scrollTop) {
console.log('Show toolbar');
} else if (scrollTop < 10) {
console.log('Show toolbar');
} else if (scrollTop > 100) {
console.log('Hide toolbar');
}
this.lastOffset = scrollTop;
}
ngAfterViewInit() {
console.log('hiiii');
this.scrollingSubscription = this.scroll
.scrolled()
.subscribe((data: CdkScrollable) => {

this.onWindowScroll(data);
});
}
https://stackblitz.com/edit/angular-9-material-starter-ykpx6o?file=src%2Fapp%2Fapp.component.ts

最佳答案

Angular 指令的选择器区分大小写,这意味着您应该使用 c dkScrollable 而不是 C dk 可滚动。

<div class="main-section" id="mainsection" cdkScrollable>
^^^^^
Forked Stackblitz

关于javascript - Angular CDKScrollable 不触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63138388/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com