今回はサイトのページ（ブラウザ）の最下部の位置をリアルタイムに取得表示したいと思います。
このページの左上部に表示されます(表示されない場合はCtrl + F5を押してみてください）。
それではいってみましょう！
Menu
手順
取得手順
・ウィンドウの高さを取得
・ページの高さを取得
・スクロールTOP位置を取得
・ウィンドウ高さからページ高さとスクロールTOPを差し引く
ざっくりこんな感じ手順で最下部からリアルタイムで数字が取得できます(*^^)v
ページの高さ取得
ページ全部（HTML）の高さを取得。
1 | let pageHeight = $(document).innerHeight(); |
ウィンドウの高さ取得
ウィンドウ（ブラウザ）の高さを取得。
1 | let winHeiht = $(window).innerHeight(); |
スクロールTOP取得
ウィンドウ（ブラウザ）TOPを取得。
1 | let sclTop = $(window).scrollTop(); |
最下部を取得
これで最下部の値が取得できます＼(^^)／
最下部＝ページの高さーウィンドウの高さースクロールTOP
1 | let relPos = pageHeight - winHeiht - sclTop; |
全サンプルコード
コピペで即試せます(*ﾟ▽ﾟ)ﾉ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | <!DOCTYPE html> <html lang="jn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <title>ページ最下部取得</title> <style> .sample14147 li { list-style: none; font-size: 50px; } .sample14147 { max-width: 650px; position: fixed; top: 10px; z-index: 100; } </style> </head> <body> <div class="sample14147"> <ul> <li class="page14147" style="background-color: red;"></li> <li class="window14147" style="background-color: skyblue;"></li> <li class="scrollTop14147" style="background-color: yellow;"></li> <li class="relPos14147" style="background-color: pink;"></li> </ul> </div> <script> $(function() { // スクロールイベント $(window).scroll(function() { //①ページ(html)の高さ let pageHeight = $(document).innerHeight(); $(".page14147").text("➀ページ高さ : " + pageHeight + "px"); //②ウィンドウ（ブラウザ）の高さ let winHeiht = $(window).innerHeight(); $(".window14147").text("➁ウィンドウ高さ : " + winHeiht + "px"); //③ウィンドウ（ブラウザ）のスクロールTOP取得 let sclTop = $(window).scrollTop(); $(".scrollTop14147").text("➂スクロールTOP : " + sclTop + "px"); //④ウィンドウ（ブラウザ）の最下部取得 let relPos = pageHeight - winHeiht - sclTop; $(".relPos14147").text("➃ページ最下部 : " + relPos + "px"); // スクロールしたら表示 if (sclTop > 0) { $(".sample14147 li").css("display", "block"); } }); }); // スクロールできるように空白を作成 for (let i = 0; i < 90; i++) { document.write('<p> </p>'); } </script> </body> </html> |
まとめ
以前はスクロールTOPを取得したので、今回はスクロールでブラウザ最下部を取得してみました。
こういうのって文章説明より視覚の方が分かりやすいかと思って記事にしてみました(*ﾟ▽ﾟ*)
以上です。
