jQueryでボッス要素のスクロール位置を割合で取得する方法

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>

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>

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>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, スクロール, 逆引き パーマリンク