angular - scrollIntoView() 不处理输入变化或模糊

Question

我有一个输入字段，无论是 on(blur)还是 on都会(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

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