明滅するプログラマの思索

WEBエンジニアとして勤務している一介の男が、日々気づいたことをまとめるブログです

swiper.js でスライド内に overflow を置いた場合スライド中前面に出てしまう問題

swiper.jsという Javascript ライブラリがあります。

Swiper - Most Modern Mobile Touch Slider

WEBサイト中にスライドを埋め込めるライブラリは数多くありますが、swiper.js はオプションが非常に多く、柔軟な実装が可能なため、気に入って使っています。
これを使ってハマったことを今回まとめてみます。

今回行おうとしたことの骨子は以下です。

  • スライド内に縦スクロールを overflow を用いて埋め込む
  • overflow した要素より前面に別の要素を z-index を用いて配置する

コードは以下のような感じ。

<div class="swiper-wrapper">
  <div class="swiper-slide">
    <div class="overflow_div">
    // ここに縦スクロールする要素1
    </div>
    <div class="slide_title">ここに縦スクロールする要素より前面に表示する要素1</div>
  </div>

  <div class="swiper-slide">
    <div class="overflow_div">
    // ここに縦スクロールする要素2
    </div>
    <div class="slide_title">ここに縦スクロールする要素より前面に表示する要素2</div>
  </div>
</div>

<script>
var swiper = new Swiper('.swiper-container', {
  speed: 600,
  touchAngle: 50,
  spaceBetween: 100
});
</script>
.overflow_div {
  overflow-y: auto;
  height: 600px;
  z-index: 1;
}
.slide_title {
  position:absolute;
  bottom: 10px;
  right: 10px;
  z-index: 10;
}

.overflow_divは overflow-y プロパティが設定され、600px の高さ分でスクロールします。
その上に.slide_title 要素を置きます。
上の2つの要素を.swiper-slide要素に格納し、スライドさせます。

スライド中のみ z-index が効かない

実際に表示すると、スライドを動かさない状態では問題なく表示されます。
ただし、スライドさせると、スライドしている間のみ.slide_title.overflow_div の後ろに隠れてしまいます。
(この現象が起こるのは iOS Safari および Chrome です。Firefox では起きませんでした)

解決方法

下に隠れてしまう.slide_title要素に、以下のプロパティを追記します。

-webkit-transform: translate3d(0,0,0);

この解決方法は、position:fixed した要素がスクロール中だけ前面に出てしまう問題と全く同じです。

qiita.com

ここでは position:fixed ではなく overflow との関連でのハマりポイントではありますが、transformプロパティを利用して後ろに隠れちゃうのを防ぐ、という点では共通です。