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

Posted 2023-03-05

【中文标题】当表格在IE中获得焦点时表格滚动条跳起来

【英文标题】：Table scroll bar jumps up when table receives focus in IE

【发布时间】：2013-02-05 10:12:49

【问题描述】：

问题：我有一个 table 与 div 包装 overflow-y : auto ，一旦 table 获得焦点，滚动条跳起来。我怎样才能防止这种情况？

我在 IE9 中遇到了这种行为，而不是在 Chrome 中。

请注意：我已将tabindex 添加到表中，以便它可以接收焦点。并且我在点击它时务实地专注于表格。

jsFiddle： http://jsfiddle.net/msdevs/r6TzS/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();
);

【问题讨论】：

如果我现在使用的是 Windows 机器，我会尝试为 onblur 创建一个处理程序（我认为这与 onfocus 相反）然后我会得到表格的当前滚动位置。这样，您可以在表格下一次获得焦点时重新设置滚动位置。

我现在想要你的书呆子 T 恤

我在这里。在 IE 11 中问题仍然存在。

【参考方案1】：

这为我解决了这个问题 - 记录包装器上的当前滚动位置，并在模糊时重新设置它。

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

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

【讨论】：

在某些情况下，模糊事件不会被触发，所以我也为点击事件添加了相同的处理程序——就像@JSuar 所做的那样。像魔术一样工作。谢谢你们俩

【参考方案2】：

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

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

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

【讨论】：

在 IE 11 中我在您的示例中看到“对象不支持属性或方法 'setActive'”

【参考方案3】：

更新：通过添加mouseleave 和mouseenter，我能够让滚动条在IE9 和Chrome v24.0.1312.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 中无法正常工作。无论如何，我认为分享此解决方案会有所帮助。

【参考方案4】：

在 IE 中，将焦点设置在 <table/> 标记上会在视觉上重置表格，方法是将焦点设置到标记中的第一个元素。

这可以通过将焦点显式设置到<table/> 的click event 中的最后一个元素来轻松实现demonstrated。如果您仔细观察，点击时，表格实际上会非常快速地滚动到顶部，然后滚动到底部。

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

如果您添加一个设置焦点的button，您会注意到不同之处。

现在这只是您问题的why 部分！如果我知道您的实际要求，我将能够提供更合适的how to fix 答案。

【参考方案5】：

您是否尝试在表格而不是 DIV 上应用滚动 Y 选项。或者您可以尝试“tbody”标签并将您的所有 TR 放入其中。并在 this 上应用 scroll-y 。我希望这将在我的知识范围内起作用。 让我知道它是否有效，否则我将为您提供其他解决方案:)