-webkit-overflow-scrollingと慣性スクロール

コンテンツがオーバーフローしたときにスクロールバーを表示させる場合に、そのコンテンツのスクロールの仕方を設定する値として-webkit-overflow-scrolling というのがある。詳細はSafari CSS Referenceの「-webkit-overflow-scrolling」を参照。値を「touch」にすると native アプリでスクロールしたときのような、いわゆる慣性スクロールの状態になる。

.foobar {
  position: absolute;
  width: 100&#x25;
  height: 300px;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

値を「touch」にした場合は、そこに stacking context が作成される。stacking context が作られると、その要素の子要素たちは、その stacking context を基準にして、z-index 順に重なるようになる（z 軸上の z-index にある親要素の平面で子要素が重なるイメージ）。なので、この指定によって、子要素の z 軸上の配置が変わる可能性がある。詳細はElaborate description of Stacking Contextsとか、The stacking context - CSS | MDNとか、位置を固定した要素のすたっきんぐ・こんてきすと？ - Weblog - hail2u.netとか、CSS 完全ガイド第 2 版の 348 ページあたりを参考。

というメモ。