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

上一篇: 动画HTML画布背景在Chrome中突然不起作用

下一篇: Safari 7.0.3 animate ScrollTop div不工作？