CSS tips - -webkit-overflow-scrolling を指定して iOS でもスムーズにスクロールさせよう

phi phi on css, css3

overflow: scroll; を指定している要素や iframe といった要素を iPhone や iPad といった iOS 系端末のブラウザで開くと, スクロールがぎこちなく感じします.

CSS の -webkit-overflow-scrollingtouch を指定することでカンタンにスムーズスクロール(慣性スクロール)させることができます.

Code

下記のような形で指定します. デフォルト値は autotouch を指定するとスムーズスクロールになります.

.box {
  width: 128px;
  height: 128px;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

Demo

左側はデフォルト, 右側は -webkit-overflow-scrolling:touch を指定しています. iOS で見ると右側のほうがスムーズにスクロールするのがわかるかと思います.