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

投稿日: 2013年9月7日 作成者: alphasis

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 $scrollTopRatio = Math.round( $event.scrollTop / ( $event.scrollHeight - $event.clientHeight ) * 100 );
    var $scrollLeftRatio = Math.round( $event.scrollLeft / ( $event.scrollWidth - $event.clientWidth ) * 100 );
    document.getElementById( "scrollTopOutput" ).innerHTML = $scrollTopRatio + "%";
    document.getElementById( "scrollLeftOutput" ).innerHTML = $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>

スポンサード リンク

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