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/

8
fullpage.js jquery mobile responsiveness touch

2 ответов

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

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

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

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

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

в качестве примера вы можете взглянуть на этот сайт использует fullpage.js С помощью небольшого просмотра. Он не использует но результат точно такой же.

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

/*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 для этой же цели. Больше в документах.

3

проблема на самом деле не имела ничего общего с fullpage.сам js-он на самом деле оказался недопустимая модификация плагина.

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

2