html - 使用 tab 键滚动在 Chrome 中不起作用

Question

我发现如果我在 div 元素中放置一个 table 元素并设置 div 的属性有点像 width、height 和 overflow:auto;并将一些输入元素放在表的 td 中。而不是随选项卡移动，发现滚动不随选项卡移动(如果输入元素包含一些数据)。此问题仅在 Chrome 中遇到，在其他现代浏览器中不会遇到。 这是示例代码:

<div style="overflow: auto; height: 100px;width:400px;">
        <table >
            <tbody>
            <tr>
                <td style="width:100px;"><input value="1" type="text"/></td>
                <td style="width:100px;"><input value="2" type="text"/></td>
                <td style="width:100px;"><input value="3" type="text"/></td>
                <td style="width:100px;"><input value="4" type="text"/></td>
                <td style="width:100px;"><input value="5" type="text"/></td>
                <td style="width:100px;"><input value="6" type="text"/></td>
                <td style="width:100px;"><input value="7" type="text"/></td>
                <td style="width:100px;"><input value="8" type="text"/></td>
                <td style="width:100px;"><input value="9" type="text"/></td>
            </tr>
            </tbody>
        </table>

</div>

我还在 plunker 上创建了一个链接:

http://plnkr.co/edit/1l8HftcoDlebywQ8LDos?p=preview

http://embed.plnkr.co/1l8HftcoDlebywQ8LDos/preview

如有任何帮助，我们将不胜感激。

Answer 1

在 Windows 8 上

Chrome:使用 TABKEY 滚动不会正确显示 tbody 视口(viewport)外的行

版本 39.0.2171.95 版本 41.0.2257.0 金丝雀(64 位) 版本 41.0.2236.0(64 位)

正常工作 浏览器 11 火狐 31.0

特此使用最新的 Chrome 和 IE11 测试了我的解决方案

        // rowObj is javascript <tr> element object
        rowObj.addEventListener("focus", function( event ) {
        console.log("focus visible row=" + event.currentTarget.sectionRowIndex);
        if(event.currentTarget.sectionRowIndex === 0)
            detObj.scrollTop = 0;                      //detObj is javascript <td>
        else
        if(event.currentTarget.sectionRowIndex > 4)    // is the max visible rows in <tbody>
            detObj.scrollTop = 9999;                   // will focus on last row in <tbody>
    }, true);

//如果需要，我可以提供 javascript 代码来计算可见行数