Fullpage.js и мобильные устройства: как включить раздел / слайд-переключатель, если необходимо включить переполнение контента?

После экспериментов с некоторыми вариантами я так и не получил удовлетворительного результата:

Используемая библиотека Javascript - FullpageJS ( http://alvarotrigo.com/fullPage/)

Fullpage.js инициализируется со следующими настройками:

$('#fullpage').fullpage({
   sectionsColor: colors,
   anchors: anchors,
   scrollOverflow: true,
   afterSlideLoad: function() {
      startTheSliders();
   },
   onLeave: function(index) {
        setTimeout(function() {
            $.fn.fullpage.scrollSlider(index,0);
        },1000);
   }
});

Важное замечание: Согласно документации scrollOverflow:true установлено (и должно быть установлено в true), поскольку, особенно на мобильных устройствах, содержание слайда иногда превышает высоту экрана.

Однако абсолютно необходимо, чтобы пользователи могли переключаться между слайдами по горизонтали и вертикали пальцем (не навигация). Намеренное поведение выглядит следующим образом:

  1. Горизонтальный переключатель, сдвиньте переключатель, если палец перемещается влево или вправо

  2. Вертикальный ползунок: следующий нижний ползунок только в том случае, если ползунок прокручивается вниз и палец перемещается вниз Следующий верхний слайд: только если слайд прокручивается до вершины и палец перемещается вверх.

Проект dev можно найти здесь: http://www.studiodankl.com/studiodankl/

Источник

2 ответа

Решение

Проблема на самом деле не имела ничего общего с самим fullpage.js - она ​​оказалась неверной модификацией плагина.

Однако, как некоторые другие испытали эту проблему: проверьте любой дополнительный HTML, CSS и особенно JavaScript, так как это, скорее всего, вызовет проблему.

Источник

Я бы не рекомендовал вам использовать scrollOverflow для мобильных устройств.

Если вы хотите создать действительно адаптивный сайт, вам следует адаптировать контент к устройству, а не использовать "хакерские" полосы прокрутки, чтобы соответствовать контенту.

Вы можете использовать класс fp-auto-heightв разделах, в которых ваш контент будет переполнен на мобильных устройствах. Вы должны добавлять его только тогда, когда ваш сайт становится отзывчивым, то есть в определенных пределах ширины или высоты.

Таким образом, эти разделы смогут быть больше, чем область просмотра устройства.

Объединяя это с responsiveHeightили жеresponsiveWidtdhопции fullpage.js (которые установлены autoScrolling:false) у вас будет довольно отзывчивый сайт на устройствах с маленьким экраном.

В качестве примера вы можете взглянуть на этот сайт, используя fullpage.js с небольшим окном просмотра. Это не использование fp-auto-height вариант но результат точно такой же.

В этом случае сайт использует это:

/*screen resolutions smaller than 950px height*/
@media (max-width: 950px){
    #section3.fp-section,
    #section3 .fp-tableCell{
        height: auto !important;
        min-height: 100%;
    }
}

Что очень похоже на то, что использует fullpage.js для fp-auto-heigh:

.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell{
    height: auto !important;
}

ОБНОВИТЬ

fullpage.js теперь предоставляет класс fp-auto-height-responsive для этой же цели. Больше в документах.

Источник
Другие вопросы по тегам