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

Answer 2

The accepted answer for this question is actually not accurate. The main issue is Internet Explorer's implementation of focus(). In the accepted JSFiddle it never calls focus() so the original issue never happens. If you take out all of the javascript from that example the scrolling issue still does not occur. Instead of focus() you should call setActive() which sets the element as active, but does not try to scroll it into view. The setActive() method is described here - http://help.dottoro.com/ljqmdirr.php. Note that it is only supported by ie.

Here is a working example - http://jsfiddle.net/r6TzS/100/

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

Answer 3

Update: By adding mouseleave and mouseenter I was able to get the scrollbar to work correctly on IE9 and Chrome v24.0.1312.57.

Working Example: 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);  
    }
});

This solution prevents the scrollbar from jumping up in IE9. However, now I find it does not work correctly in Chrome. Regardless, I thought it would be helpful to share this solution.