Question

问题：table div overflow-y : auto table，tabindex获得焦点，滚动条跳了起来。我怎么能阻止这个？

我在 IE9 中遇到此行为，而不是在Chrome中。

请注意：我已将<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>添加到表中，以便它可以获得焦点。点击它就可以专注于桌面。

的jsfiddle： http://jsfiddle.net/msdevs/r6TzS/4/

向下滚动表格
点击页面上的其他元素，使桌面丢失焦点
点击表格以关注它
滚动条跳了

HTML：

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
}

CSS：

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

JS：

{{1}}

Answer 1

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

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

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

Answer 2

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

支持

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

'%H:%M:%S'

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

Answer 4

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

通过明确将焦点设置为click event <table/>内的最后一个元素，可以轻松demonstrated。如果你仔细观察，点击时，桌子实际上会滚动到顶部，然后很快就会向下滚动。

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

如果您添加一个设置焦点的button，您会发现差异。

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

Answer 5

您是否尝试在桌面而不是DIV上应用scroll-y选项。或者您可以尝试“tbody”标记并将所有TR放入其中。并在此处应用scroll-y。我希望这对我的知识有用。让我知道如果它有效，否则我会给你另一个解决方案：）

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

5 个答案: