3

我正在使用 Javascript scrollIntoView 函数来滚动容器,以便当前处于焦点的元素出现在容器的中心。

我正在使用 addEventListener 来监听箭头键以更改我想要聚焦的元素,然后启动 scrollIntoView 以滚动到当前聚焦的元素。

如果我慢慢改变焦点元素,这很好用,但如果我开始快速改变焦点元素,滚动“几乎”停止并等到我停止改变焦点元素,然后该元素将在容器中居中。

这只发生在 Google Chrome 上,我在 Firefox 中对其进行了测试,无论我多快更改焦点元素,它都能正常工作。

建议不必与其他浏览器兼容,也可以更改谷歌浏览器设置来解决这个问题,因为这只是本地个人使用,我只会使用谷歌浏览器运行它。

可能的问题

虽然我不确定,但我认为 Google Chrome 处理 scrollIntoView 的方式与例如 Firefox 不同。当我快速调用它并且上一个滚动尚未完成时,它会在执行过程中停止上一个 scrollIntoView,这会使元素不在容器中居中,然后再次调用 scrollIntoView 并再次计算以找出当前滚动位置以及需要滚动多少才能使当前聚焦的元素位于容器的中心。如果进行了多次调用,则只有最后一次调用 scrollIntoView 调用被完全执行,这意味着没有完全完成 scrollIntoView 调用是导致滚动滞后的原因。

scrollIntoView 选项:

elementCurrentlyOnFocus.scrollIntoView({behavior:"smooth",block:"center"});

我测试我的代码的浏览器:

Chrome 版本:76.0.3809.100(滞后)

火狐版本:68.0.2(流畅)

4

0 回答 0