ボッス要素のスクロール位置を取得

JavaScriptでスクロール可能ボッス要素のスクロール位置を取得するサンプル。

JavaScriptでスクロール位置を割合で取得する方法については、「JavaScriptでスクロール位置を割合で取得する方法」のページへ。

jQueryを使って作る方法については、「jQueryでボッス要素のスクロール位置を取得する方法」のページへ。

実装例

垂直方向にスクロールした距離: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">
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>

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>

スポンサード リンク

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