滚动富媒体网页的最流畅的方式是什么？

Question

我正在创建一个包含多个JavaScript幻灯片，CSS加载，动画菜单和CSS过渡动画的网页，我的页面高度在iPad上也很长。我有一个导航菜单，当用户点击它时，它将滚动到页面上的特定位置：

var $viewport = $('html:not(:animated),body:not(:animated)');
    $viewport.animate({scrollTop: dest}, 2000, function(){menu_scrolling=false;});

我的网页可以像我的macbook pro上的丝绸一样滚动，在Firefox，Chrome和Safari上测试，但在我的iPad上，它像地狱一样口吃，它几乎就像跳过动画一样，甚至捏缩放也是滞后的。 我尝试了jQuery scrollto插件，jquery-animation增强插件，这些都是iPad上的滞后。 使菜单在iPad上顺畅滚动浏览富媒体网页的最佳方法是什么？

Answer 1

一个想法可能是依赖CSS过渡，并希望触发硬件加速。

说你申请

transition: all ease 0.5s; 

到您的容器，然后执行类似

的操作

$container.css( 'transform', 'translate3d(0,' + offsetValue + 'px,0)' );

完成后，您可以删除转换并将scrollTop设置为正确的值，以便用户仍然可以手动上下滚动页面。 要在iOS6上触发硬件加速，您可能需要快速查看http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/