onscrollイベント（スクロールイベント）とは、要素やウィンドウをスクロールした時のイベント。
構文
HTML
<element onscroll="イベントハンドラ">
例
BODY要素
ウィンドウをスクロールした時点にイベントハンドラを登録する場合。
<body onscroll="イベントハンドラ">
DIV要素
スクロールバーを表示させたDIV要素をスクロールした時点にイベントハンドラを登録する場合。
<div onscroll="イベントハンドラ">
JavaScript
object.onscroll = function(){ イベントハンドラ };
例
window
ウィンドウをスクロールした時点にイベントハンドラを登録する場合。
window.onscroll = function(){ イベントハンドラ };
DIV要素
スクロールバーを表示させたDIV要素をスクロールした時点にイベントハンドラを登録する場合。
window.onscroll = function(){ イベントハンドラ };
サンプル
垂直方向にスクロールした距離：0
水平方向にスクロールした距離：0
| 1-1 | 1-2 | 1-3 | 1-4 | 1-5 |
| 2-1 | 2-2 | 2-3 | 2-4 | 2-5 |
| 3-1 | 3-2 | 3-3 | 3-4 | 3-5 |
| 4-1 | 4-2 | 4-3 | 4-4 | 4-5 |
| 5-1 | 5-2 | 5-3 | 5-4 | 5-5 |
サンプルについて
JavaScript上で動的にイベントハンドラを登録するタイプのサンプル。
サンプルの動作について
- 背景色が黄色のボックス要素を縦スクロールすると、「垂直方向にスクロールした距離：」の右横に、垂直方向にスクロールした距離を表示する。
- 背景色が黄色のボックス要素を横スクロールすると、「水平方向にスクロールした距離：」の右横に、水平方向にスクロールした距離を表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
document.getElementById( "sampleBox" ).onscroll = function(){
getTheScrollPosition( this );
};
}
function getTheScrollPosition( $event ) {
var $scrollTop = $event.scrollTop;
var $scrollLeft = $event.scrollLeft;
document.getElementById( "scrollTopOutput" ).innerHTML = $scrollTop + "px";
document.getElementById( "scrollLeftOutput" ).innerHTML = $scrollLeft + "px";
}
</script>
window.onload = function () {
document.getElementById( "sampleBox" ).onscroll = function(){
getTheScrollPosition( this );
};
}
function getTheScrollPosition( $event ) {
var $scrollTop = $event.scrollTop;
var $scrollLeft = $event.scrollLeft;
document.getElementById( "scrollTopOutput" ).innerHTML = $scrollTop + "px";
document.getElementById( "scrollLeftOutput" ).innerHTML = $scrollLeft + "px";
}
</script>
HTML
<p>
垂直方向にスクロールした距離：<span id="scrollTopOutput">0</span>
<br />
水平方向にスクロールした距離：<span id="scrollLeftOutput">0</span>
</p>
<div id="sampleBox">
<table id="sampleTable">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
<td>1-5</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
<td>3-5</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
<td>4-5</td>
</tr>
<tr>
<td>5-1</td>
<td>5-2</td>
<td>5-3</td>
<td>5-4</td>
<td>5-5</td>
</tr>
</table>
</div>
垂直方向にスクロールした距離：<span id="scrollTopOutput">0</span>
<br />
水平方向にスクロールした距離：<span id="scrollLeftOutput">0</span>
</p>
<div id="sampleBox">
<table id="sampleTable">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
<td>1-5</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
<td>3-5</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
<td>4-5</td>
</tr>
<tr>
<td>5-1</td>
<td>5-2</td>
<td>5-3</td>
<td>5-4</td>
<td>5-5</td>
</tr>
</table>
</div>
CSS
<style>
#sampleBox {
width: 300px;
height: 300px;
overflow: scroll;
background-color: yellow;
}
#sampleTable td {
padding: 0;
border: 1px solid red !important;
text-align: center;
vertical-align: middle;
}
#sampleTable {
width: 500px !important;
height: 500px !important;
border: 1px solid red !important;
margin: 0;
}
</style>
#sampleBox {
width: 300px;
height: 300px;
overflow: scroll;
background-color: yellow;
}
#sampleTable td {
padding: 0;
border: 1px solid red !important;
text-align: center;
vertical-align: middle;
}
#sampleTable {
width: 500px !important;
height: 500px !important;
border: 1px solid red !important;
margin: 0;
}
</style>