7

问题：我有table一个包装div，overflow-y : auto一旦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();
});
4

5 回答 5

7

这为我修复了它 - 记录包装器上的当前滚动位置，并在模糊时重新安装它。

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

$('#wrapper').scroll(function(){
    $(this).data( {posY: $(this).scrollTop()} )
})
.blur(function(){
    $(this).scrollTop( $(this).data("posY") );
})
于 2013-02-22T16:05:41.700 回答
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();
});
于 2015-10-12T20:30:02.717 回答
1

更新：通过添加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 中无法正常工作。无论如何，我认为分享这个解决方案会有所帮助。

于 2013-02-22T15:20:26.137 回答
0

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

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

这是因为，仅单击第table一个行为就会focus将table，td:nth-last-child(1)即最后一个td被设置的焦点，从而将表格滚动到底部。

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

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

于 2013-02-22T15:54:46.503 回答
0

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

于 2013-02-23T03:59:53.843 回答