メモログ

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

1
2
3
4
5
6
7

.foobar {
  position:absolute;
  width: 100%;
  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ページあたりを参考。

というメモ。