jQuery API の scroll( fn ) は、スクロールイベントにイベントハンドラをバインドしたいときに便利なメソッドだ。
要素をスクロールするたびに、scroll( fn ) の引数に指定したイベントハンドラを呼び出すことができる。
記述方法
jQuery( セレクター ) . scroll( イベンドハンドラ );
「セレクター」の要素のスクロールイベントに、「イベンドハンドラ」をバインド。
実装例（サンプル）
スクロール：スクロール中
このボックスを、スクロールすると、「スクロール：」の右側に「スクロール中」と表示する。
実装例（サンプル）の動作について
黄色のボックスをスクロールすると、「スクロール：」の右側に「スクロール中」と表示する。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-scroll' ) . scroll( function() {
jQuery( '#jquery-api-scroll-display' ) . css( 'display', 'inline' ) . fadeOut( 'fast' );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-scroll' ) . scroll( function() {
jQuery( '#jquery-api-scroll-display' ) . css( 'display', 'inline' ) . fadeOut( 'fast' );
} );
} );
// -->
</script>
CSS
<style>
<!--
#jquery-api-scroll {
width: 100px;
height: 100px;
overflow: scroll !important;
border: 1px #c0c0c0 solid;
background-color: yellow;
padding: 10px;
}
#jquery-api-scroll p {
white-space: nowrap;
}
#jquery-api-scroll-display {
display: none;
}
-->
</style>
<!--
#jquery-api-scroll {
width: 100px;
height: 100px;
overflow: scroll !important;
border: 1px #c0c0c0 solid;
background-color: yellow;
padding: 10px;
}
#jquery-api-scroll p {
white-space: nowrap;
}
#jquery-api-scroll-display {
display: none;
}
-->
</style>
HTML
<p>スクロール：<span id="jquery-api-scroll-display">スクロール中</span></p>
<div id="jquery-api-scroll"><br /><br /><br /><p>このボックスを、スクロールすると、「スクロール：」の右側に「スクロール中」と表示する。</p><br /><br /><br /></div>
<div id="jquery-api-scroll"><br /><br /><br /><p>このボックスを、スクロールすると、「スクロール：」の右側に「スクロール中」と表示する。</p><br /><br /><br /></div>