Fullpage.js i urządzenia mobilne: jak włączyć przełącznik sekcji/slajdu, jeśli przepełnienie treści musi być włączone?

Question

Po eksperymentach z niektórych opcji nadal nie dostał satysfakcjonujący wynik:

Zastosowany biblioteka JavaScript jest FullpageJS (http://alvarotrigo.com/fullPage/)

Fullpage.js inicjowany jest z następującymi ustawieniami:

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

Ważne: Zgodnie z dokumentacją scrollOverflow: true jest ustawione (i musi być ustawione na true), ponieważ w szczególności na urządzeniach mobilnych zawartość slajdu jest czasami wyższa niż wysokość ekranu.

Jest jednak bezwzględnie wymagane, aby użytkownicy mogli przełączać się w poziomie i pionie między slajdami za pomocą palca (bez nawigacji). Przeznaczone zachowanie jest następujący:

1. przełącznik suwakowy przełącznik pozioma jeśli przesuwa palec w lewo lub w prawo

2. pionowy suwak przełącznika: Następny dolny suwak tylko wtedy, gdy suwak jest przewijane do dołu i palcem przesuwa się w dół. Następny górny slajd: Tylko jeśli slajd przewinie się do góry, a palec przesunie się w górę.

Projekt dev można znaleźć tutaj: http://www.studiodankl.com/studiodankl/

Answer 1

Problem faktycznie nie miał nic wspólnego z samym fullpage.js - okazało się, że jest to nieprawidłowa modyfikacja wtyczki.

Jednak w przypadku niektórych osób wystąpił ten problem: sprawdź wszystkie dodatkowe kody HTML, CSS i , zwłaszcza JavaScript, ponieważ może to spowodować problem.

Answer 2

nie polecam do korzystania scrollOverflow dla urządzeń mobilnych.

Jeśli chcesz mieć prawdziwą responsywną stronę, powinieneś dostosować zawartość do urządzenia i nie używać "hakowatych" pasków przewijania, aby dopasować zawartość.

Możesz użyć klasy fp-auto-height w sekcjach, w których zawartość będzie przepełniona na urządzeniach mobilnych. Powinieneś go dodawać tylko wtedy, gdy Twoja strona reaguje, to jest pod pewnymi ograniczeniami szerokości lub wysokości.

W ten sposób sekcje te będą mogły być większe niż rzutnia urządzenia.

Łącząc to z responsiveHeight lub responsiveWidtdh opcjami fullpage.js (to zestaw autoScrolling:false) będziesz mógł mieć dość responsywną stronę na urządzeniach z małym ekranem.

Jako przykład można spojrzeć na this site using fullpage.js przy użyciu małej rzutni. Nie używa opcji fp-auto-height, ale wynik jest dokładnie taki sam.

W takim przypadku strona nami za pomocą tego:

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

co jest dość podobny do tego, co fullpage.js używa do fp-auto-heigh:

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

UPDATE

fullpage.js zapewnia teraz klasa fp-auto-height-responsive w tym samym celu. Więcej in the docs.