当表格在IE中获得焦点时，表格滚动条会跳起来 [英] Table scroll bar jumps up when table receives focus in IE

问题描述

问题:我有一个table，其中的div用overflow-y : auto包装，一旦table获得焦点，滚动条就会跳起来.我该如何预防呢?

The issue: I've a table with a wrapping div with overflow-y : auto , once the table gets focus, the scroll bar jumps up. How can I prevent this?

我在 IE9 中而不是在Chrome中遇到这种行为.

I experience this behavior in IE9, not in Chrome.

请注意:我已经将tabindex添加到表格中，以便它可以获取焦点.我很实用地将注意力集中在桌子上.

Please note: I've added tabindex to the table so it can receive focus. And I focus on the table pragmatically upon a click on it.

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();
});

推荐答案

这对我来说已解决-在包装器上保留当前滚动位置的记录，并在模糊时将其恢复原状.

This fixed it for me - keeping a record of the current scroll position on the wrapper, and re-instating it on blur.

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

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

这篇关于当表格在IE中获得焦点时，表格滚动条会跳起来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！