Chrome中使用tab键滚动不起作用。

Question

我发现如果我将一个表格元素放在div元素内，并设置div的属性，如宽度、高度和overflow:auto;，并在表格的td中放置一些输入元素。然后使用tab键移动时，发现滚动条不随着选项卡移动（如果输入元素包含一些数据）。这个问题只出现在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

任何关于此事的帮助将不胜感激。

- Naveen Dahiya

---

我在我的Mac上使用Chrome 38，当我通过盒子进行选项卡时，一切都可以正常滚动。 - kinezu

我正在使用Windows 8操作系统，这个问题似乎只出现在Windows操作系统中，但我没有在Mac上尝试过。 - Naveen Dahiya

我在Windows 7机器上使用Chrome 38，它运行良好。可能是针对Windows 8特定的问题？ - Aeolingamenfel

但是我在 Windows 7 机器上遇到了同样的问题。 - Naveen Dahiya

Answer 1

在Windows 8上，使用Chrome浏览器时，使用TAB键滚动时无法正确滚动到tbody视口外的行。版本39.0.2171.95、41.0.2257.0 canary (64位)和41.0.2236.0 (64位)存在此问题。但是，在IE 11和Firefox 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代码来计算可见行数

- user3856491

---

其实我不想使用JS来滚动，这似乎是Chrome的问题，但我不确定。 - Naveen Dahiya

Answer 2

可能尝试重新安装Chrome，或者在Safari上尝试相同的代码。也许可以尝试使用鼠标，或者如果已经使用了触控板，则使用触控板。

- user2045195