7

我发现如果我在 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

对此的任何帮助将不胜感激。

4

2 回答 2

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 和 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 代码来计算可见行数

于 2014-12-30T08:25:06.920 回答
0

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

于 2014-12-24T13:54:31.020 回答