スクロール位置によって何らかの処理を行いたいときのために、
スクロールの位置(画面上部、下部、中央)を取得するサンプルをメモ。
サンプルは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の半分(中央)を足したものになります。
この処理をページ読み込み時、画面サイズ変更時、スクロール時に実行するようにしています。
コメントが承認されるまで時間がかかります。