ブロックワークス

 

Colorboxのinlineモーダルが動かないのはページ内アンカーと衝突しているからかもしれない

Colorboxのinlineモーダルとページ内スクロール(アンカー)の組み合わせでトラブったので、メモしておきます。

状況

  • Colorboxを使用
  • ページ内アンカー間をスムーススクロールで移動出来るようにする

おさらい

Colorbox

Colorboxはさまざまなモーダルを実装できるプラグインです。その中で、inlineコンテンツをモーダル表示するようにできます。例えば以下のようなコードです。id「inline_content」のコンテンツを作り、リンク「#inline_content」から発火してモーダルを表示する仕組みですね。

スムーススクロール

スムーススクロールは、プラグインだったり自前実装だったりいろいろなパターンがありますが、ほとんどの場合、#から始まるアンカーリンク先のY座標を調べて、そこまでスムーズにスクロールしていくものが大半だと思います。

問題

上記2つの例で例えると、href=”#inline_content”というアンカータグとhref=”#top”というアンカータグがバッティングしてしまい、Colorboxが動かなくなります。

対処方法

長くなりましたが、対処方法としては、「smoothScroll.js」を使い、このプラグインに実装されているdata-tor-smoothScroll=”noSmooth”の機能を使います。

上記コードで例えると、以下のように追加します。

<p><a class="inline" href="#inline_content" data-tor-smoothScroll="noSmooth">インラインHTML</a></p>

data-tor-smoothScroll=”noSmooth”をつけたリンクは、スムーススクロールの影響を受けなくなります。つまり、Colorboxが無事動くという事になります。

さいごに

1つ1つのプログラムはわかっていても、組み合わせた時に予想しない挙動になる事があるので、上手く動かない時は、組み合わせを疑ってみるべきだと感じました。