overflow: scroll;を指定した要素に対してoverflow-scrolling: touch;を指定すると、iOSでスムーズなスクロールになりますが、スクロール中にスクロールイベントが発生しなくなってしまうようだったので試した内容をメモしておきます。
確認したのはiOS6になります。
サンプルコード
まずはoverflow-scrolling: touch;を指定しないで実装してみます。
HTML
1 2 3 4 5 6 | <div class="box">あいうえお<br />あいうえお<br />～ 略 ～</div><div id="result"></div> |
CSS
1 2 3 4 5 6 | .box { width: 200px; height: 150px; overflow-y: scroll; background: #ccc;} |
スクロールイベントが発生した時に、#resultに.boxの現在のスクロール位置を出力します。
JavaScript
1 2 3 4 5 | $(function() { $('.box').on('scroll', function() { $('#result').text($('.box').scrollTop()); });}); |
ページ全体の場合はスクロール完了しないとスクロールイベントが発生しませんが、一部の要素に対してoverflow-scrolling: touch;を指定した場合、スクロール中にもスクロールイベントが発生するようになります。
overflow-scrolling: touch;を指定する前のデモページ
次にoverflow-scrolling: touch;を追加して試してみます。
CSS
1 2 3 4 5 6 7 8 | .box { width: 200px; height: 150px; overflow-y: scroll; background: #ccc; -webkit-overflow-scrolling: touch; overflow-scrolling: touch;} |
ページ全体の時と同様に、スクロール完了しないとスクロールイベントが発生しなくなりました。
overflow-scrolling: touch;を指定した後のデモページ
【参考サイト】
- iOS Safariで全体のscrollイベント取得 – Qiita
- CSS tips – -webkit-overflow-scrolling を指定して iOS でもスムーズにスクロールさせよう | phiary
コメントが承認されるまで時間がかかります。