jQueryを使い、スクロール可能ボッス要素のスクロール位置を割合で取得する方法。
jQueryを使わない方法については、「JavaScriptでボッス要素のスクロール位置を割合で取得する方法」のページへ。
実装例
垂直方向にスクロールした割合：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
<script type="text/javascript">
jQuery( function() {
jQuery( '#sampleBox' ).scroll( function () {
var $scrollTopRatio = Math.round( this.scrollTop / ( this.scrollHeight - this.clientHeight ) * 100 );
var $scrollLeftRatio = Math.round( this.scrollLeft / ( this.scrollWidth - this.clientWidth ) * 100 );
jQuery( '#scrollTopOutput' ).html( $scrollTopRatio + '%' );
jQuery( '#scrollLeftOutput' ).html( $scrollLeftRatio + '%' );
} );
} );
</script>
jQuery( function() {
jQuery( '#sampleBox' ).scroll( function () {
var $scrollTopRatio = Math.round( this.scrollTop / ( this.scrollHeight - this.clientHeight ) * 100 );
var $scrollLeftRatio = Math.round( this.scrollLeft / ( this.scrollWidth - this.clientWidth ) * 100 );
jQuery( '#scrollTopOutput' ).html( $scrollTopRatio + '%' );
jQuery( '#scrollLeftOutput' ).html( $scrollLeftRatio + '%' );
} );
} );
</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>