如何使用 FullPage Js 在部分内滚动？

Question

我正在尝试使用 FullPageJs 并在部分内进行滚动，但即使我按照推荐添加了超薄滚动插件，页面也不会在桌面上滚动。

这是我正在使用的代码

<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/scrolloverflow.js"></script>
<script type="text/javascript" src="../vendors/jquery.slimscroll.min.js"></script>

    <script type="text/javascript" src="../jquery.fullPage.js"></script>
    <script type="text/javascript" src="examples.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#fullpage').fullpage({
                anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage'],
                sectionsColor: ['#4A6FB1', '#939FAA', '#323539'],
                scrollOverflow: true,
                scrollOverflowOptions: {
                    scrollbars: true,
                    mouseWheel: true,
                    hideScrollbars: false,
                    fadeScrollbars: false,
                    disableMouse: true
                }
            });
        });
    </script>

页面在桌面上没有移动，这里是demo。该页面仅在我将 disableMouse 更改为 false 时才会移动，但随后它只会像在移动设备上一样移动。我必须点击并滚动。

问题

如何使部分内的滚动正常工作？

Answer 1

你有an example available in the files that comes with the download of fullpage.js。

同样的online。

fullpage.js 不再使用 slimScroll.js，您可以在文档中看到：

scrollOverflow：（默认为 false）定义是否为部分/幻灯片创建滚动，以防其内容大于其高度。当设置为 true 时，您的内容将被插件包装。考虑在 afterRender 回调中使用委托或加载其他脚本。如果将其设置为 true，则需要供应商库 scrolloverflow.min.js 并且应该在 fullPage.js 插件之前加载它。例如：

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

只有当我将 disableMouse 更改为 false 时页面才会移动

您不必修改任何滚动溢出选项。如果您想要默认行为，请删除您的 scrollOverflowOptions。