Table scroll bar jumps up when table receives focus in IE

Question

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?

I experience this behavior in IE9, not in Chrome.

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. Scroll down the table
2. Click on other element on the page so table loss focus
3. Click on the table to focus on it
4. Scroll bar jumps up

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

Answer 1

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