Question

我有一个HTML网格，我们使用箭头键来导航单元格（就像一个由div组成的电子表格）。每个单元格都有一个INPUT文本框。我们使用javascript来捕捉键盘箭头键以在网格中移动。这在一年多的时间里在所有浏览器中都运行良好。现在，使用Chrome 39，网格将不再正确滚动，以便在屏幕上显示焦点输入。

这是演示问题的小提琴：scrolling list。

// This causes scrolling into view on focus to stop working
$('#grid').on('focus','input',function(e){
    this.select();
});

使用向上和向下箭头滚动列表中的单元格。当它到达顶部或底部时，如果新单元格尚未在视图中，它应滚动到视图中。

这个小提琴示例在IE10 +和Firefox中仍然可以正常工作，但在Chrome 39（最新版本）中，当您从底部或顶部箭头进入新单元格时，它不会滚动。此外，有时文本框会重新划分几个像素。

当新单元格（输入）获得焦点时，我们调用this.select（）来选择任何现有文本。如果我们删除对select（）的调用，则Chrome 39会再次正常工作。但是，用户希望看到文本被选中。

问题是：我正在做的事情会导致这种情况，还是Chrome 39中的错误？如果它是一个错误，有没有人知道一个解决方法来选择输入文本而不破坏原生滚动到视图行为？任何想法都将不胜感激。

更新

看起来即使删除所有JS代码，只在滚动div中留下一堆输入也会失败（仅限Chrome）。您只能使用没有JS的tab / shift-tab导航，但仍会出现滚动问题。我是疯了还是其他人在跑这个小提琴时看到同样的螺旋滚动？

例如，请参阅Updated Fiddle。

Answer 1

根据我的经验，问题似乎发生在位置绝对/固定且具有z-index值的父容器中。这会影响Chrome 39 +

尝试将该父容器设置为具有以下CSS声明：

-webkit-backface-visibility: hidden;

Answer 2

好吧，看起来它只是Chrome 39中的一个错误。希望它们能在不久之前修复它。

幸运的是，Chrome也是为数不多的支持scrollIntoViewIfNeeded（）方法的浏览器之一，因此我可以在焦点事件处理程序中执行类似的操作：

this.select();
if (typeof this.scrollIntoViewIfNeeded === "function")
    this.scrollIntoViewIfNeeded(true);

因此，这解决了眼前的问题。

Chrome 39 Bug - 输入select（）会中断滚动

2 个答案: