【jQueryのスクロールイベント】Webページのスクロール位置を取得するプログラム
この記事でわかること
jQueryには画面をスクロールするとイベントが発生する「スクロールイベント」という要素があります。最近はWebサイトで使われていることが多く、画面をスクロールすると、「トップに戻る」ボタンや画像が表示されるのもスクロールイベントの例です。ここでは、今流行のスクロールイベントについて実際の使用例も交えながら解説していきます。参考にしていただければ幸いです。
- システム
エンジニア - スクロールイベントは色々なサイトで使われているけど、どうやって実装しているのか疑問だったんですよね。
- プロジェクト
マネージャー - 難しそうなイメージがありますが、jQueryを使えばたった数行で実装できますよ。
jQueryのスクロールイベントとは？
冒頭でも少し申し上げましたが、スクロールイベントとは、画面をスクロールしたときに呼ばれる動作です。これだけでは内容が分かりにくいため、例を挙げたいと思います。
＜例＞
訪問者がWebサイト上部にいるときは何も表示しないが、画面をスクロールしてWebサイトの中部まで来たら見出しの文字や画像を表示したいとき。
訪問者がWebサイト上部にいるときは何も表示しないが、画面をスクロールしてWebサイトの中部まで来たら見出しの文字や画像を表示したいとき。
このような状況、何となくイメージできたでしょうか。
あらかじめ「見出しの文字や画像を表示する」という動作を作成しておき、「Webサイトの中部まで来たらこの動作を呼び出す」という処理を書けば、簡単に実装することができるのです。
スクロールイベントのjQuery使用例
スクロールイベントについて何となく理解できたところで、実際の使用例を見ていきましょう。下記は、一番基本的な「scrollTop」を使ったスクロール位置を確認するプログラムです。
プログラムの下には実行結果が表示されています。
|
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 |
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <p>位置：<span id="position">0px</span></p> <div id="box"> <div id="contents">スクロールしてください</div> </div> </body> <!--CSS--> <style> #box { overflow: scroll; height: 200px; border: 3px solid gray; } #contents { height: 500px; } </style> <!--jQuery--> <script> $('#box').scroll(function() { $('#position').text($(this).scrollTop() + 'px'); }); </script> </html> |
位置：0px
スクロールしてください