jQuery UI .widgets resetting scroll positions of children when they are hidden
I am making heavy use of jQuery UI with my latest project. Unfortunately I've hit a major wall due to some really whacky behavior exhibited by the jQuery UI widgets when they contain elements with scrollbars for overflow.
Check out this demo
- Scroll down in one of the
.scroll-container
elements - Click an accordion header
- Click on old header - note the element was auto-scrolled to the top.
Is there anyway to prevent this from happening? It's screwing with a major plugin of mine that utilizes jQuery scrolling. I'm flat-out lost as to what to do here!
Perhaps this is a bug worth mentioning in the jQuery UI dev forums...
Edit
So far the bug has been开发者_C百科 confirmed in...
- Chrome -
8.0.552.231
on OSX10.6.5
- Safari -
5.0.3
on OSX10.6.5
(makes sense) - FF -
3.6.12
on OSX10.6.5
And is not present in...
FF -3.6.12
on OSX10.6.5
I had the same problem. A workaround I came up with is to set the id of the ui object after creation. Then I save the scrollTop() position before I hide the object. And when I show the object again, I simply set the scrollTop() to the saved value.
// Set the id of the object if you have multiple objects with the same class
if ($("#divScroll").length == 0) { // If the object does not exist with an id
$(".ui-jqgrid-bdiv").each(function () { // Select each object via class
strID = $(this).attr("id");
// If the current object (selected via class) does not have an id, set id
if (strID == undefined || strID == false) {
$(this).attr("id", "divScroll");
}
});
}
// Save the scroll position before hide()
intScrollTop = $("#divScroll").scrollTop();
$("#divScroll").hide();
// Set the scroll position to the saved value after show()
$("#divScroll").show();
$("#divScroll").scrollTop(intScrollTop);
According to the jQuery UI dev who answered my trouble ticket:
This is just how browsers work, as soon as you hide an element, it loses the scroll position.
精彩评论