モバイル(タッチ)デバイスでfullpage.jsを無効にする

patrickzdb

fullpage.jsとslimscroll.jsプラグインを使用しています。これは、コンテナーセクションの高さを超えるコンテンツを含むセクションでスクロールできるようにするために必要です。

タッチデバイスでのエクスペリエンスがかなり悪いことに気づきました。通常はスワイプ、リリースしてページがスクロールするのを見ることができますが、slimscroll divでは、指がタッチ領域を離れるとすぐにスクロールが停止します。

だから私がやりたいのは、モバイルとタブレットではfullpage.jsを無効にし、デスクトップでは有効にすることです。fullPage.jsの問題とドキュメントを確認しましたが、これを行う簡単な方法が見つかりませんでした。

誰かが私を助けてくれますか?

どうもありがとう

アルバロ

タッチデバイスでフルページを初期化しないでください。モバイル/タッチデバイスの検出に対処する必要があります。グーグルで少し検索するか、ここでさえ、さまざまな選択肢を見つけてください。

次のようになります。

var isPhoneDevice = [ WHATEVER FUNCTION YOU WANT TO USE ]

//if it is not a phone device...
if(!isPhoneDevice){
    //initializing fullpage...
    $.fn.fullpage();
}

更新

現時点では、fullpage.jsが別の代替手段を提供しています。使用responsiveWidthしてresponsiveHeightオプションを。このようにして、fullpage.jsは、指定された値(px)の下で通常のWebサイトとして機能します。

これをクラスと組み合わせて、fp-auto-height-responsivefullPage.jsがセクションの高さをレスポンシブに設定するのを防ぎ、セクションを完全に制御できるようにすることもできます。

詳細については、ドキュメントをご覧ください

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

モバイルデバイスでサイト本体のタッチパンを無効にする

分類Dev

fullpage.jsでタッチスワイプを無効にする

分類Dev

ブートストラップ4–モバイルデバイスでタブ機能を無効にする

分類Dev

JSのモバイルデバイスでのクリックとタッチ

分類Dev

モバイルデバイスでスクロールを無効にする

分類Dev

モバイルデバイスfullpage.jsでの垂直スクロール

分類Dev

タッチスクリーンを備えたデバイスでCSSルールを無効にする

分類Dev

モバイル デバイスでブートストラップ データ スパイを無効にする方法は? (解像度が低い)

分類Dev

Androidモバイルデバイス管理:すべてのアプリでスクリーンショットのキャプチャを無効にする

分類Dev

タッチデバイスの背後のレイヤーのスクロールを無効にする

分類Dev

タッチデバイスのリンクを無効にする方法

分類Dev

デスクトップでフクロウカルーセルを無効にし、モバイルデバイスで有効にする方法

分類Dev

モバイルデバイスの場合:ホバーをタッチ/クリックに変更する

分類Dev

タッチデバイスで1本の指のドラッグを無効にする方法

分類Dev

モバイルデバイスで水平スクロールを無効にする

分類Dev

Magentoでモバイルビューを無効にしてデスクトップ画面を表示する方法

分類Dev

pulseaudio自動デバイススイッチを無効にする方法は?

分類Dev

JavaFX WebViewHyperLinksをモバイルデバイスで無効にすることはできません

分類Dev

fullPage.jsタップがモバイルで機能しない

分類Dev

モバイル/タブレットデバイスでHTMLを変更する

分類Dev

モバイル/タブレットデバイスでHTMLを変更する

分類Dev

モバイルデバイスで親ナビゲーションリンクを無効にする

分類Dev

モバイルでアドレスバーの非表示を無効にする

分類Dev

モバイルデバイスで(またはスクロールクリックで)水平スクロールを無効にする

分類Dev

モバイルWebでピンチズームを無効にする

分類Dev

モバイルデバイスのスライダーでイメージマップを無効にする方法

分類Dev

タッチデバイスのブラウザで「ズーム」オプションをダブルタップして無効にする

分類Dev

モバイルで視差を無効にする

分類Dev

モバイルデバイスのスクロール軸を変更する(タッチ)

Related 関連記事

  1. 1

    モバイルデバイスでサイト本体のタッチパンを無効にする

  2. 2

    fullpage.jsでタッチスワイプを無効にする

  3. 3

    ブートストラップ4–モバイルデバイスでタブ機能を無効にする

  4. 4

    JSのモバイルデバイスでのクリックとタッチ

  5. 5

    モバイルデバイスでスクロールを無効にする

  6. 6

    モバイルデバイスfullpage.jsでの垂直スクロール

  7. 7

    タッチスクリーンを備えたデバイスでCSSルールを無効にする

  8. 8

    モバイル デバイスでブートストラップ データ スパイを無効にする方法は? (解像度が低い)

  9. 9

    Androidモバイルデバイス管理:すべてのアプリでスクリーンショットのキャプチャを無効にする

  10. 10

    タッチデバイスの背後のレイヤーのスクロールを無効にする

  11. 11

    タッチデバイスのリンクを無効にする方法

  12. 12

    デスクトップでフクロウカルーセルを無効にし、モバイルデバイスで有効にする方法

  13. 13

    モバイルデバイスの場合:ホバーをタッチ/クリックに変更する

  14. 14

    タッチデバイスで1本の指のドラッグを無効にする方法

  15. 15

    モバイルデバイスで水平スクロールを無効にする

  16. 16

    Magentoでモバイルビューを無効にしてデスクトップ画面を表示する方法

  17. 17

    pulseaudio自動デバイススイッチを無効にする方法は?

  18. 18

    JavaFX WebViewHyperLinksをモバイルデバイスで無効にすることはできません

  19. 19

    fullPage.jsタップがモバイルで機能しない

  20. 20

    モバイル/タブレットデバイスでHTMLを変更する

  21. 21

    モバイル/タブレットデバイスでHTMLを変更する

  22. 22

    モバイルデバイスで親ナビゲーションリンクを無効にする

  23. 23

    モバイルでアドレスバーの非表示を無効にする

  24. 24

    モバイルデバイスで(またはスクロールクリックで)水平スクロールを無効にする

  25. 25

    モバイルWebでピンチズームを無効にする

  26. 26

    モバイルデバイスのスライダーでイメージマップを無効にする方法

  27. 27

    タッチデバイスのブラウザで「ズーム」オプションをダブルタップして無効にする

  28. 28

    モバイルで視差を無効にする

  29. 29

    モバイルデバイスのスクロール軸を変更する(タッチ)

ホットタグ

アーカイブ