Fullpage.js - Prevent scroll

Question

Ich habe vollpage.js eingerichtet, möchte aber die Möglichkeit haben, zu einem Abschnitt zu blättern und wenn bestimmte Bedingungen erfüllt sind, um neue Elemente im selben Abschnitt des nächsten Scrolls anzuzeigen. Dieser nächste Bildlauf sollte nicht zum nächsten Abschnitt weitergehen.

Mithilfe der Rückrufe konnte ich feststellen, wann ein Abschnitt diesen zweiten Bildlauf benötigt. Aus der Dokumentation heraus konnte ich sogar die Scrollfunktion abbrechen, bevor sie stattfindet, und somit die neuen Elemente anzeigen lassen, ohne zum nächsten Abschnitt zu gehen. Das Problem besteht darin, dass es danach in den nächsten Abschnitt verschoben werden kann. Ich bekomme es entweder, um die Bildlauffunktion zu stoppen, aber nicht mehr in der Lage, erneut zu blättern, oder der Text wird angezeigt, während es zum nächsten Abschnitt blättert, da sich jede Art von Markierung ändern kann und beim nächsten Bildlauf mehrere Male ausgelöst wird.

 //HTML - typical fullpage.js section 

     <div class="section"> 
      <div> 
       <h1>Default Text</h1> 
       <p class="hidden-text">Additonal text to appear on second scroll</p> 
      </div> 
     </div> 
     <div class="section"> 
      <div> 
       <h1>Next Section</h1> 
      </div> 
     </div> 

     //fullpage.js - the callbacks being used 

     afterLoad: function(anchorLink, index){ 
      preventScroll = false; 
      if(this.has(".hidden-text").length){ 
       preventScroll = true; 
      } 
     }, 
     onLeave: function(index, nextIndex, direction){ 
      if (preventScroll && direction == "down") { 
       this.find('.hidden-text').addClass('animate-text'); 
       this.find('.hidden-text').removeClass('hidden-text'); 
       return false; 
      } 
     }, 

Codepen hier: http://codepen.io/anon/pen/oxEexY

Answer 1

Sie haben die Logik hinzufügen zu wissen, wann der versteckte Text angezeigt wurde. Fügen Sie einen timeOut oder etwas hinzu. Dann ändern Sie das Flag preventScroll zu true, wenn das passiert.

Reproduction online

Beachten Sie auch, wie ich $(this) verwendet und nicht this:

In diesem Fall habe ich den Text bin angenommen wird nach 1 Sekunde (1000 ms) gezeigt.