javascript - 滚动浏览富媒体网页的最流畅方式是什么?

标签 javascript jquery html css browser

我正在制作一个包含多个 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 上,它像 hell 一样结结巴巴,几乎就像跳过了动画,即使双指缩放也很滞后。 我尝试了 jQuery scrollto 插件、jquery-animation 增强插件,这些在 iPad 上都很慢。 制作菜单以在 iPad 上顺畅滚动富媒体网页的最佳方式是什么?

最佳答案

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

关于javascript - 滚动浏览富媒体网页的最流畅方式是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13541418/

相关文章:

javascript - 如何在不同 session 中绑定(bind)多个复选框

javascript - HTML Canvas 线条透明度不适用于移动 Safari

html - 如何在 Libgdx 中使 html5 全屏显示?

javascript - 排除外部库被 bundle 在 webpack 中?

jquery - 如何验证文本框以防止传递空值?

javascript - javascript 的调试工具,用于清理未使用的变量、语法错误......

javascript - 有没有办法在将 .ejs 文件渲染到 .html 文件的同时运行函数?

javascript - 随着时间的推移,Ajax 繁重的 JS 应用程序使用过多的内存

javascript - meteor 动态渲染模板

javascript - 如何在 ODOO v8 中对特定字段使用 JQ 或 JavaScript?