overflow-scrollingを指定するとscrollイベントが発生しない

overflow: scroll;を指定した要素に対してoverflow-scrolling: touch;を指定すると、iOSでスムーズなスクロールになりますが、スクロール中にスクロールイベントが発生しなくなってしまうようだったので試した内容をメモしておきます。
確認したのはiOS6になります。

サンプルコード

まずはoverflow-scrolling: touch;を指定しないで実装してみます。

HTML

<div class="box">
あいうえお<br />
あいうえお<br />
~ 略 ~
</div>
<div id="result"></div>

CSS

.box {
	width: 200px;
	height: 150px;
	overflow-y: scroll;
	background: #ccc;
}

スクロールイベントが発生した時に、#resultに.boxの現在のスクロール位置を出力します。

JavaScript

$(function() {
	$('.box').on('scroll', function() {
		$('#result').text($('.box').scrollTop());
	});
});

ページ全体の場合はスクロール完了しないとスクロールイベントが発生しませんが、一部の要素に対してoverflow-scrolling: touch;を指定した場合、スクロール中にもスクロールイベントが発生するようになります。
overflow-scrolling: touch;を指定する前のデモページ
 

次にoverflow-scrolling: touch;を追加して試してみます。

CSS

.box {
	width: 200px;
	height: 150px;
	overflow-y: scroll;
	background: #ccc;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
}

ページ全体の時と同様に、スクロール完了しないとスクロールイベントが発生しなくなりました。
overflow-scrolling: touch;を指定した後のデモページ
 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年6月
 1
2345678
9101112131415
16171819202122
23242526272829
30