使用标签滚动在 Chrome 中不起作用

Question

我发现，如果我在div元素中放置一个表元素并设置div的属性，例如宽度，高度和溢出：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：使用 TAB 键滚动无法正确显示正文视口外的行

版本 39.0.2171.95版本 41.0.2257.0 Canary(64 位(版本 41.0.2236.0(64 位(

在IE 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 代码来计算

Answer 2

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