Как заставить прокрутку внутри раздела работать с FullPageJs?

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>

Страница не перемещается на рабочий стол, и вот демо. Страница перемещается только тогда, когда я изменяю disableMouse на false, но затем она перемещается, как если бы она была на мобильном телефоне. Я должен нажать и прокрутить.

Вопрос

Как сделать так, чтобы прокрутка внутри раздела работала нормально?

Answer 1

У вас есть пример, доступный в файлах, поставляемых с загрузкой fullpage.js.

И тот же самый онлайн.

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

Вам не нужно изменять какие-либо опции scrolloverflow. Удалить свой scrollOverflowOptions если вы хотите поведение по умолчанию.