scrollIntoView()无法处理输入更改或模糊

Question

我有一个输入字段，它在(blur)或(change)上触发一个函数，该函数应将页面滚动到下一个元素块。由于某些原因，我忽略了它不起作用，尽管它在带有按钮的(click)上使用时效果良好。我也确信函数被正确调用。看起来scrollIntoView被忽略了。你们知道原因是什么吗？

<input type="number" (change)="scrollToNext(i)"">

private scrollToNext(i) {
this.arrayOfElements[i + 1].scrollIntoView({behavior: 'smooth', block: 'start'})
}

Answer 1

我发现onChange事件似乎会阻止某些转换，我不知道为什么。

但解决方法是调用一些回调，如setTimeout:

private scrollToNext(i) {
let arr = this.arrayOfElements;
setTimout(() => {
arr[i + 1].scrollIntoView({behavior: 'smooth', block: 'start'});
}, 100);
}

Answer 2

首先检查浏览器是否支持此功能https://caniuse.com/#feat=scrollintoview

其次，根据其他元素的布局，元素可能不会完全滚动到顶部或底部。