JavaScript
jQuery
fullPage.js

fullPage.js を使ってみた話

案件で fullPage.js を使用したので少し備忘録的に書いておく。

fullPage.jsを使用してみて

  1. $(windo).scroll(~~ は反応しない
  2. $.fn.fullpage.reBuild();について
  3. オプションの normalScrollElements
  4. ページ内スクロール時のスライドショーについて

1. $(windo).scroll(~~ は反応しない

fullPage.jsは translate3d を使用して全画面ページの遷移をしているからそもそもスクロールしてない。
一応代替として「mousewheel event を bind しなよ」っていうのがあるっぽい。

2. $.fn.fullpage.reBuild();について

Updates the DOM structure to fit the new window size or its contents. Ideal to use in combination with AJAX calls or external changes in the DOM structure of the site, specially when using scrollOverflow:true.

新しいウィンドウサイズまたはその内容に合わせてDOM構造を更新します。 特にscrollOverflow:trueを使用する場合は、AJAX呼び出しやサイトのDOM構造の外部変更と組み合わせて使用するのに適しています。

公式ドキュメント引用(google翻訳)

って事らしいけど自分の実装環境では、reizeした後にreBuildしてもコンテンツがスクロールしなくなるっていう現象が多発したので、一旦現在のcurrentを変数に保存しておいて、destroyしてから再度実行するようにしてる。
※そもそもreBuildは要素の再構成のみ(?)って気もするので破棄して再実行の方が良さそう

3. オプションの normalScrollElements

normalScrollElements: (default null) If you want to avoid the auto scroll when scrolling over some elements, this is the option you need to use. (useful for maps, scrolling divs etc.) It requires a string with the jQuery selectors for those elements. (For example: normalScrollElements: '#element1, .element2'). This option should not be applied to any section/slide element itself.

normalScrollElements:(デフォルトはnull)いくつかの要素をスクロールするときに自動スクロールを避けたい場合は、これを使用する必要があります。 (マップ、スクロールdivなどに便利です。)これらの要素にはjQueryセレクターを含む文字列が必要です。 (例:normalScrollElements: '#element1、.element2')。 このオプションは、セクション/スライド要素自体には適用しないでください。

公式ドキュメント引用(google翻訳)

自動スクロールしたくない要素を指定してね。って感じなんだけど、これ他のライブラリ(lightbox系)で追加される要素だったりを指定したりして、その要素が消えてもスクロールしなくなったままっていう現象が多発。
これが一番困った。

これについては「Callbacks」の「onLeave」部分に特定条件時は「return false」するようにした方が楽かもしんない。

$('#fullpage').fullpage({
    ~~~~~,
    onLeave: function(index, nextIndex, direction){
        if (特定条件) {
            // return false してスクロールさせない。
            return false;
        }
    }
});

4. ページ内スクロール時がある場合のスライドショーについて

ページ内スクロールがある時にスライドショーの横スワイプが効かなくなる現象が発生。
これについても、ある特定条件下じゃないと発生しないっぽい。

  • scrollOverflow が true
  • scrollOverflowOptions を設定している
  • ページ内スクロールが発生している
  • スワイプの機能があるスライショーを使用している(自環境ではslick)

上記の条件時にスワイプしてもスライドショーが無反応になった。
「iScroll.js」の方をまだそこまで調べてないけど、ページ内スクロールさせなければ問題ない。

とりあえず、今の所このくらい。