Fullpage.js 没有在手机上滚动

Question

我已经在我正在处理的网页上安装了 jQuery 插件 fullpage.js，它在我的计算机上运行良好，但是页面第二部分的内容太大而无法在我的手机屏幕上显示，应该正在滚动 - 但我无法弄清楚如何做到这一点。我不会假装我对javascript了解很多，所以我有点不知所措，解决方案可能很简单。 提前感谢您的帮助！

相关网页： http://romowind.com/testside/ - 这是首页。

Answer 1

您必须使用选项scrollOverflow 将其设置为true 并在加载jquery.fullpage.js 文件之前添加依赖项jquery.slimscroll.min.js 指定at the documentation。

下载插件后，javascript jquery.slimscroll.min.js 位于 vendors 文件夹中。

确保使用最新版本的 fullpage.js。

您包含的文件应该是 4（2 个 jquery 库 + 全页 js 文件 + 全页 css 文件 + slimscroll ） 比如：

<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>    

<script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>

那么，你的初始化应该是这样的：

$(document).ready(function () {
    $.fn.fullpage({
        slidesColor: ['#fff', '#fff', '#fff', '#fff', '#fff'],
        anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
        scrollOverflow: true
    });
});