Scroll resets in a div when the div is hidden

Question

I am using jquery UI tabs and when I switch tabs any scrollable divs that I have inside that tab reset their position to the top of the screen when I tab away from it and back to it. Does anyone know how to prevent this?

Answer 1

This happens because the tab is hidden, effectively collapsing it's height to 0 and resetting the scroll. You can't really prevent it, because that's unavoidable, but you can set the scroll position back to where it was like this:

$("#tabs").tabs({
    select: function(event, ui) {
        var prevTab = $(ui.panel).parent()
                                 .children(".ui-tabs-panel:not(.ui-tabs-hide)");
        prevTab.data("scrollTop", prevTab.scrollTop());
    },
    show: function(event, ui) {
        var tab = $(ui.panel);
        if(tab.data("scrollTop"))
            tab.scrollTop(tab.data("scrollTop"));
    }
});​

This stores the scroll position when leaving the tab, restores it when coming back to it.
Here's a quick demo for testing, enjoy :)