スクロールの位置を取得する方法

スクロール位置によって何らかの処理を行いたいときのために、
スクロールの位置(画面上部、下部、中央)を取得するサンプルをメモ。
サンプルはjQueryを使用します。

スクロールの位置を取得する方法のデモページ

サンプルコード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(function() {
    function scrollPoint() {
        var windowHeight = $(window).height(),
        windowScrolltop = $(window).scrollTop(),
        scrollBottom = windowHeight + windowScrolltop,
        scrollMiddle = windowHeight / 2 + windowScrolltop;
 
        $('#height span').text(windowHeight);
        $('#top span').text(windowScrolltop);
        $('#middle span').text(scrollMiddle)
        $('#bottom span').text(scrollBottom)
    }
 
    $(window).on('load resize scroll', function() {
        scrollPoint();
    });
});

$(window).height()で画面の高さ(windowHeight)を、
$(window).scrollTop()で画面上部のスクロール位置(windowScrolltop)を取得。

画面下部のスクロール位置(scrollBottom)はwindowScrolltopとwindowHeightを足したもの、
画面中央(scrollMiddle)はwindowScrolltopとwindowHeightの半分(中央)を足したものになります。

この処理をページ読み込み時、画面サイズ変更時、スクロール時に実行するようにしています。

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2025年4月
 12345
6789101112
13141516171819
20212223242526
27282930