2016-04-08 17 views
1

私はfullpage.jsを設定しましたが、セクションにスクロールできる機能と、特定の条件が満たされて次のスクロールで同じセクション内に新しい要素を表示する機能が必要です。この次のスクロールは、次のセクションに進むべきではありません。Fullpage.js - スクロールを防止する

コールバックを使用して、セクションにこの第2のスクロールがいつ必要かを判断することができました。ドキュメントから私はそれが起こる前にスクロールをキャンセルすることさえできたので、次のセクションに行くことなく新しい要素を表示することができます。問題はその後、次のセクションに移動できるようにしています。スクロールを停止するようになっても、もう一度スクロールできなくなったり、次のセクションにスクロールするときにテキストが表示されます。何らかのフラグが変更される可能性があります。

 //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はここで見つける:http://codepen.io/anon/pen/oxEexY

+0

あなたの問題をよりよく理解するために、jsfiddleまたはcodepenの複製を追加してください。 – Alvaro

+0

コードを追加しました。 – chrism10

答えて

1

あなたは隠されたテキストが表示されたときを知るためのロジックを追加する必要があります。 timeOutなどを追加します。その場合、フラグpreventScrolltrueに変更します。私はテキストを想定しています。この場合

は、1秒(1000ミリ秒)後に表示されます。

また

Reproduction online

、私は$(this)なくthisを使用する方法に注意してください。