发生的事情是您的 div 高度没有适应虚拟键盘。
我建议在构造函数中做这样的事情:
const $resizeEvent = fromEvent(window, 'resize')
.map(() => {
return window.innerHeight;
})
.debounceTime(20).subscribe(data => {
this.overflowHeight = `${data}px`;
});
这将做的是检测调整大小,当键盘出现时它会触发。然后将高度更改为 div 的新高度。当它关闭时,它将再次触发并再次使其恢复正常大小。
在您的 html 中:
<div [ngStyle]="'height': overflowHeight, 'overflow': 'auto'}" [scrollTop]="scrollHeight"></div>
如果您使用子视图,请注意确保检查有多少像素被包围并执行高度 - 像素。
每个输入都需要有一个唯一的 id:
<input id={{uniqueId}} (focus)="scrollTo(uniqueId) (scroll)="setScrollHeigth($event)" />
然后你做:
private scrollTo(_index: any) {
if (window.screen.width === 360) {
height = document.getElementById(_index).offsetTop;
if (height > 0) { this.scrollHeight = height; }
else if (this.scrollHeigthElm > 0) { this.scrollHeight = 0; }
}
}
private setScrollHeigth(_event: any) {
this.scrollHeigthElm = _event.srcElement.scrollTop;
}
这样做是检查您的滚动是否高于零并移动它。并在滚动为 0 时重置它。