web-dev-qa-db-ja.com

Fullpage.jsとモバイルデバイス：コンテンツオーバーフローを有効にする必要がある場合、セクション/スライドスイッチを有効にする方法は？

いくつかのオプションを試した後でも、満足のいく結果は得られませんでした。

使用されるJavascriptライブラリはFullpageJSです（ http://alvarotrigo.com/fullPage/ ）

Fullpage.jsは、次の設定で初期化されます。

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

重要：ドキュメントによると、scrollOverflow：trueが設定されています（trueに設定する必要があります）。特にモバイルデバイスでは、スライドのコンテンツが画面の高さよりも高い場合があるためです。

ただし、ユーザーが（ナビゲーションではなく）指でスライドを水平方向と垂直方向に切り替えることができることが絶対に必要です。意図された動作は次のとおりです。

  1. 指が左または右に動くと、水平スイッチスイッチがスライドします

  2. 垂直スイッチスライド：スライドが下にスクロールされ、指が下に移動した場合にのみ、次の下のスライド。次の一番上のスライド：スライドが一番上までスクロールされ、指が上に移動した場合のみ。

（以前の）開発プロジェクトはここにあります： http://www.studiodankl.com/

jquerymobiletouchfullpage.jsresponsiveness
8
Blackbam

この問題は実際にはfullpage.js自体とは何の関係もありませんでした-実際には無効なプラグインの変更であることが判明しました。

ただし、他の一部の人がこの問題を経験したため、追加のHTML、CSS、および特にJavaScriptを確認してください。これは、問題を引き起こす可能性が最も高いためです。

3
Blackbam

モバイルデバイスにscrollOverflowを使用することはお勧めしません。

実際のレスポンシブサイトが必要な場合は、コンテンツをデバイスに適合させ、コンテンツに合わせて「ハッキー」なスクロールバーを使用しないようにする必要があります。

モバイルデバイスでコンテンツがオーバーフローするセクションで、クラス fp-auto-height を利用できます。サイトがレスポンシブになったとき、つまり特定の幅または高さの制限の下でのみ追加する必要があります。

このようにして、これらのセクションをデバイスのビューポートよりも大きくすることができます。

これをfullpage.jsのresponsiveHeightまたはresponsiveWidtdhオプション（autoScrolling:falseを設定）と組み合わせると、小さな画面のデバイスで非常に応答性の高いサイトを作成できます。

例として、小さなビューポートを使用して fullpage.jsを使用するこのサイト を見ることができます。 fp-auto-heightオプションを使用していませんが、結果はまったく同じです。

その場合、私たちがこれを使用しているサイト：

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

これは、fullpage.jsがfp-auto-heighに使用するものと非常によく似ています。

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

更新

fullpage.jsは、これと同じ目的でクラスfp-auto-height-responsiveを提供するようになりました。詳細 ドキュメント内 。

3
Alvaro