1

我正在制作一个网页，其中包含几个 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 上制作菜单以平滑滚动富媒体网页的最佳方法是什么？

4

1 回答 1

0

一种想法可能是依赖 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/

于 2013-02-19T22:43:33.037 回答