Android 4.2.1 上的 Fullpage.js 断断续续滚动答案

【问题标题】：Fullpage.js choppy scrolling on Android 4.2.1Android 4.2.1 上的 Fullpage.js 断断续续滚动
【发布时间】：2025-12-03 14:10:02
【问题描述】：

我将 fullpage.js 用于 Android 4.2 平板电脑的基于 html5/css3/jquery 的应用程序，我使用 PhoneGap Web 服务生成该应用程序。在 PC 和模拟器上，一切运行顺畅且快速，但在平板电脑本身上，各部分之间的滚动非常缓慢且不稳定。在幻灯片之间滚动会更好一些，虽然也不是很流畅。我在 fullpage.js 选项中有 css3: true 并且我为应用程序使用了非常轻量级的图像和元素。假设每个部分每个滚动加载大约 50kb。我为所有部分固定了背景，并且它保持在原位而没有滞后，只有加载的每个部分内容变得不稳定（看起来它正在加载方形补丁）。当我在平板电脑的 Chrome 浏览器中打开相同的 html 文件时，一切正常。所以我相信这是 Android 的默认 WebView 导致了这种不稳定和问题。有什么方法可以让它与 fullpage.js 一起工作吗？

【问题讨论】：

您在使用 Android 网络浏览器访问 demo page 时是否遇到同样的问题？
不，它在默认浏览器中运行流畅，就像我在 Chrome 上的页面一样。但是您的页面实际上并没有任何内容，它只是 css 颜色和文本。我的应用在每个部分都有两层全屏图像。背景为 30kb Jpg，顶部为 1kb svg。这不是那么大的负担。但是，当我删除所有图像时，它运行良好。因此，只有在部分有全屏图像时才会出现断断续续的情况。
我在这里上传了它，同样的断断续续的加载也通过网络持续存在。 mnabievart.com/TabletPortfolio_3（不要介意由于屏幕尺寸不同而导致的一些图形故障）。

标签： android html css webview fullpage.js

【解决方案1】：

您刚刚发布的链接需要 94 秒才能使用 Chrome 加载到我的 PC 上。而且它有很多控制台错误。

除此之外，这显然是您网站的性能问题。

您正在尝试创建 HUGE 网站布局。 30 个部分，不少于 105 个幻灯片...

不要指望它可以在手机上流畅运行。您的 1280x1024 分辨率布局正在创建一个高度为 28.170 像素，宽度为几千像素的布局。并且所有这些都必须在每个卷轴上移动。

如果您实现一些延迟加载技术（或者甚至是用于部分/幻灯片内容的 ajax 技术），您的浏览器可能会更容易。这样你仍然会有巨大的布局，但它至少是空的。请查看this answer。您甚至可以查看 fullpage.js 提供的 lazy load 选项。

此外，使用选项scrollBar:true 可能会提高性能。

【讨论】：

嗯，整个想法是使用 fullpage.js 作为离线应用程序的平台，因此从本地存储加载时加载时间更短，而这些控制台错误只是缺少单独存储的资源。我尝试了lazyload和scrollBar，它并没有太大变化。所以我想出了将 .section{-webkit-transform : translate3d(0,0,0);} 添加到我的 css 中的解决方案。我没有完全消除断断续续，在部分之间滑动时仍然有快速的黑色闪光，但它比没有它的断断续续少得多。我想我必须手动刷新到 Android 5.0 才能忘记 WebView。
还要考虑我的建议。为每个部分动态添加内容。