alvarotrigo.com/fullPage/とブートストラップ3グリッドの問題

Question

私は良いフルページ効果のためにalvarotrigo.com/fullPage/を使用しています。また、私は次のようになり、ブートストラップ3グリッドシステム、使用しています：今

<section id="section" class="section"> 
    <div class="home"> 
     <div class="container-fluid position-relative"> 
      <div class="row"> 
       <div class="col-sm-4"> 
       </div> 
       <div class="col-sm-4"> 
       </div> 
       <div class="col-sm-4"> 
       </div> 
      </div> 
     </div> 
    </div> 

を、我々は3列、セクションに閉じ、すべてを見て、このHTMLは3 colunsビューを作成し、それは大丈夫です。

小さいビューポートの場合、この3つの列は3つの全角の列に変換されますが、これは問題です。fullpageとして、jsはスクロールの2番目と3番目の列をスキップします。#sectionにスクロールすると、 div、そしてもし私が下にスクロールすると、アニメーションは2と3 divをスキップして別のセクションに移動します。私は簡単なイラストレーションを作った。

div 2とdiv 3がグレー表示されているため、アニメーション中にこれらのdivがスキップされることを示しています。

私の質問は、fullpage.jsで設定したり、いくつかの調整をすることができるので、スクロールダウン後にスクリプトでこれらのdivが表示されますか？

ありがとうございました。

Answer 1

responsiveWidthまたはresponsiveHeightオプションを使用して、小さな画面デバイスの自動スクロール機能をオフにすることをおすすめします。

$('#fullpage').fullpage({ 
    responsiveWidth: 758 
}); 

Example online

Answer 2

scrollOverflow: trueあなたが各全ページセクション内にスクロールするのに役立ちます：

そのため、あなたはこのような何かを持つことができます。

チェックjsfiddle Code for ScrollOverflow

$('#fullpage').fullpage({ 
       sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'], 
       scrollOverflow: true 
});