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

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 $scrollTop = this.scrollTop;
        var $scrollLeft = this.scrollLeft;
        jQuery( '#scrollTopOutput' ).html( $scrollTop + 'px' );
        jQuery( '#scrollLeftOutput' ).html( $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>

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, スクロール, 逆引き パーマリンク