Question

我发现如果我在div元素中放置一个table元素并设置div的属性有点像width，height和overflow：auto;并在表格中放置一些输入元素。而不是使用标签移动，发现滚动不会随标签移动（如果输入元素包含一些数据）。此问题仅在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视口外的行

版本39.0.2171.95 版本41.0.2257.0金丝雀（64位）版本41.0.2236.0（64位）

正确使用 IE 11 Firefox 31.0

我的解决方案使用最新的Chrome＆amp; 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上尝试使用相同的代码。也许尝试使用鼠标，或者如果已经使用了触控板，请使用它。

滚动显示无法在Chrome中使用标签

2 个答案: