要在展开子元素时保持div的滚动条位置,可以使用Angular的ViewChild和ElementRef来获取div元素,并通过scrollTop属性来保存和恢复滚动条位置。
首先,在你的组件类中导入ViewChild和ElementRef:
import { Component, ViewChild, ElementRef } from '@angular/core';
然后,在组件类中使用ViewChild和ElementRef来获取div元素的引用:
@Component({
selector: 'app-your-component',
template: `
`
})
export class YourComponent {
@ViewChild('scrollContainer', {static: false}) scrollContainer: ElementRef;
toggleContent() {
// your code to toggle the content here
}
}
在上面的示例中,我们使用#scrollContainer
来给div元素命名,并在ViewChild中使用相同的名称进行引用。
接下来,在toggleContent方法中,你可以通过scrollContainer.nativeElement.scrollTop来保存和恢复滚动条位置。例如:
toggleContent() {
const scrollPosition = this.scrollContainer.nativeElement.scrollTop;
// your code to toggle the content here
setTimeout(() => {
this.scrollContainer.nativeElement.scrollTop = scrollPosition;
});
}
在上面的示例中,我们使用setTimeout来确保在切换内容后更新滚动条位置。
这样,当你点击按钮切换内容时,div的滚动条位置将保持不变。