2015-04-21 9 views
5

Używam fullpage.js i zastanawiałem się, w jaki sposób chciałbym zapobiec temu, aby użytkownik przewinął z powrotem do początkowego (pierwszego) slajdu po przejściu obok niego?Zapobieganie przewijaniu z powrotem do pierwszego slajdu po przewinięciu przeszłości

Nadal chcę móc przewijać wszystkie następne slajdy zgodnie z przeznaczeniem, ale zasadniczo usunąć pierwszy slajd za nim, tak aby nie można go było przewinąć z powrotem (zasadniczo sprawiając, że drugi slajd jest pierwszy, tak jakby pierwszy był już tam nie ma).

Mam nadzieję, że to ma sens? Pierwszy slajd jest po prostu slajdem intro/wideo i chcę go tylko pokazać przy początkowym ładowaniu strony, a następnie po przewinięciu przekazanym, aby przestał być dostępny.

Odpowiedz

1

Wystarczy użyć setAllowScrolling gdy przyjeździe na 2 części:

$('#fullpage').fullpage({ 
    afterLoad: function(anchorLink, index){ 
     //on load section 2... 
     if(index == 2){ 
      $.fn.fullpage.setAllowScrolling(false, 'up'); 
     }else{ 
      $.fn.fullpage.setAllowScrolling(true, 'up'); 
     } 
    } 
}); 

Demo online

+0

Och, miło! Zastanawiałem się nad użyciem tego, ale myślałem, że zapobiegnie przewijaniu się z dowolnego slajdu. Podoba mi się sposób, w jaki to zrobiłeś. Dzięki! – shparkison

+0

Huh? Wersja demonstracyjna nie działa, przynajmniej w Chrome 42. –

+0

Działa, jeśli używasz zwoju myszką lub przesuwasz palcem. Nie będzie działać ze strzałkami na klawiaturze, jeśli o to ci chodzi. – Alvaro

1

EDYTOWANIE: Okazało się, że to nie działa. Prowadzę śledztwo, przyjęta odpowiedź nie działa, przynajmniej w Chrome 42. Mam lodged a bug report.

Zgodnie z the documentation, można zarejestrować onLeave callback. Powinieneś być w stanie użyć tego do górnego slajdu podczas przewijania w dół. Rozwiązaniem mogłoby wyglądać tak:

<div class="section"> 
    <div class="slide" data-anchor="slide1"> Slide 1 </div> 
    <div class="slide" data-anchor="slide2"> Slide 2 </div> 
    <div class="slide" data-anchor="slide3"> Slide 3 </div> 
    <div class="slide" data-anchor="slide4"> Slide 4 </div> 
</div> 
<script> 
    $('.section').fullpage({ 
     onLeave: function(index, nextIndex, direction) {  
      if (index == 1) { 
       $(this).remove(); 
      } 
     } 
    }); 
</script> 

To wszystko theroetical jak ja nigdy nie używane fullpage.js (wygląda schludny chociaż) i dlatego nie przetestowane.

+0

fajny pomysł! Nie myślałem, żeby po prostu całkowicie usunąć ten element. Dam ci to i zgłoś się, jeśli to działa. Dziękuję za wejście. – shparkison

+0

@shparkison, cóż, możesz ".css (" display "," none ")', ale to wydawało się mniej eleganckie. –

+0

Hmmm ... żadne z tych rozwiązań nie działa. Brzmiało to dobrze w koncepcji, ale całkowicie nukes przewijanie i kończy wyłączanie wszystkich sekcji. Próbowałem również wywołać funkcję '.reBuild();' po usunięciu slajdu, ale wciąż nie ma szczęścia. – shparkison

Powiązane problemy