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.

Answer 4

In IE, setting the focus on the <table/> tag visually resets the table, by setting the focus to the first element in the tag.

This can be easily demonstrated by explicitly setting the focus to the last element within the click event of <table/>. If you look closely, on clicking, the table actually scrolls to the top and then to the bottom very quickly.

This is because, the mere act of clicking on the table first sets the focus to the table (note that this is inherent behaviour, and not the result of your code), once that is done, the custom handler that you have defined receives the event and causes the td:nth-last-child(1), i.e., the last td to be set focus, thus scrolling the table to the bottom.

If you add a button that sets the focus, you will notice the difference.

Now that is only the why part of your question! I would be able to provide a more fitting how to fix answer if I knew of your actual requirement.

Answer 5

Have you tried to apply scroll-y option on table instead of DIV. Or you may try "tbody" tag and put all your TR in this. And apply scroll-y on this . I hope this will work to my knowledge. Let me know if it works otherwise I shall give you an other solution :)