当表格在IE中获得焦点时，表格滚动条会跳起来

Table scroll bar jumps up when table receives focus in IE

本文关键字：表格 滚动条 跳起来 焦点 IE      更新时间：2023-09-26

问题：我有一个table，它用overflow-y : auto包裹div，一旦table聚焦，滚动条就会跳起来。我该如何防止这种情况发生？

我在IE9中体验到这种行为，而不是在Chrome中。

请注意：我已经将tabindex添加到表中，以便它可以接收焦点。点击后，我会务实地关注表格。

jsFiddle:http://jsfiddle.net/msdevs/r6TzS/4/

  1. 向下滚动表格
  2. 单击页面上的其他元素，使表格失去焦点
  3. 单击表格以关注它
  4. 滚动条向上跳跃

HTML:

    <div>
        <table id="tabl" tabindex="1">
            <thead>
                <tr>
                    <th style="font-weight: bold">head</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>first</td>
                </tr>
                <tr>
                    <td>SEC</td>
                </tr>
                <tr>
                    <td>dsadfawdfadfa</td>
                </tr>
                <tr>
                    <td>dsadfawdfadfa</td>
                </tr>
.
.
.
                 <tr>
                    <td>dsadfawdfadfa</td>
                </tr>
            </tbody>
        </table>
    </div>

CSS:

table {
    table-layout: fixed;
    font-family: arial;
    font-size: 11px;
    text-align: left;
    outline: none;
    width: 625px;
}
div {
    overflow-y: auto;
    overflow-x: hidden;
    height: 150px;
    width: 300px
}

JS:

$('table').focusin(function (e) {
    console.log("table got focus - scroller jumps up");
}).click(function () {
    $('table').focus();
});

这为我修复了它——在包装器上记录当前滚动位置，并在blur上重新安装。

http://jsfiddle.net/r6TzS/10/

$('#wrapper').scroll(function(){
    $(this).data( {posY: $(this).scrollTop()} )
})
.blur(function(){
    $(this).scrollTop( $(this).data("posY") );
})

这个问题的公认答案实际上并不准确。主要的问题是Internet Explorer对focus（）的实现。在已接受的JSFiddle中，它从不调用focus（），因此原始问题永远不会发生。如果去掉该示例中的所有javascript，滚动问题仍然不会发生。您应该调用setActive（），而不是focus（），它将元素设置为活动的，但不会尝试将其滚动到视图中。这里描述了setActive（）方法-http://help.dottoro.com/ljqmdirr.php.请注意，它仅由例如支持

以下是一个工作示例-http://jsfiddle.net/r6TzS/100/

$('table').focusin(function (e) {
    console.log("table got focus - scroller jumps up");
}).click(function () {
    $('table').setActive();
});

更新：通过添加mouseleave和mouseenter，我能够使滚动条在IE9和Chrome v24.0.13125.57上正常工作。

工作示例：http://jsfiddle.net/r6TzS/9/

var scrollPos = 0;
var ignoreScrollPos = 0;
$('div').mouseleave(function() {
    scrollPos = $('div').scrollTop(); 
    console.log("Scroll position set: " + scrollPos);        
    ignoreScrollPos = 0;
}).mouseenter(function() {
    ignoreScrollPos = 1;
});
$('table').focusin(function (e) {
    console.log("table got focus - scroller jumps up: " 
                + $('div').scrollTop()); 
}).click(function () {    
    if (!ignoreScrollPos) {
        console.log("Set position to: " + scrollPos);
        $('div').scrollTop(scrollPos);  
    }
});

这个解决方案可以防止IE9中的滚动条弹出然而，现在我发现它在Chrome中无法正常工作无论如何，我认为分享这个解决方案会很有帮助。

在IE中，通过将焦点设置为标记中的第一个元素，在<table/>标记上设置焦点可以直观地重置表。

这可以通过明确地将焦点设置为<table/>的click event内的最后一个元素来容易地证明。如果你仔细观察，点击时，表格实际上会很快滚动到顶部，然后滚动到底部。

这是因为，仅仅点击table就可以首先将focus设置为table（请注意，这是固有行为，而不是代码的结果），一旦完成，您定义的自定义处理程序就会接收事件，并使td:nth-last-child(1)（即最后一个td）成为焦点，从而将表滚动到底部。

如果您添加一个button来设置焦点，您会注意到差异。

这只是你问题的why部分！如果我知道你的实际要求，我可以提供一个更合适的how to fix答案。

您是否尝试在表上应用scroll-y选项而不是div.或者您可以尝试"tbody"标记并将所有TR都放在其中。并在上面应用滚动。据我所知，我希望这能奏效。如果它不起作用，请告诉我，我会给你另一个解决方案：）

相关文章：