Safari 7.0.3 animate ScrollTop div not working?
I'm having trouble getting a #div with overflow:scroll to animate and scroll down to a specific part within the div in Safari 7.0.3.
It works just fine in FF, Opera, Chrome, but I can't get it to work in Safari for some reason? Does anybody know why and how I can work around this? I've tried setting the #menuContainer to relative positioning, and it works but badly. It will work sometimes and other times it won't.
CSS
#menu{
position:absolute;
display: block;
right: 0;
}
#menuContainer{
position:absolute;
overflow: scroll;
width: 350px;
right: 0;
}
HTML
<div id="menu">
<div id="menuContainer">
<ul>
<li></li>
<li></li>
<li>.....
<ul>
</div>
</div>
jQuery
$("#menuContainer").animate({scrollTop: $("li:nth-child("+varJumpTo+")").offset().top}, 500);
Okay, I found a solution.
It seems like in Safari it's best to .animate() scollTop after all of the content is loaded. So adding this around jQuery works:
$(window).load(function(){
$("#menuContainer").animate({scrollTop: $("li:nth-child("+varJumpTo+")").offset().top}, 500);
});
It was acting wonky because all of the content within the list needed to be loaded before we calculated the top() position of the div offset().
Thanks! I hope this helps someone else out :D
链接地址: http://www.djcxy.com/p/23040.html