jQueryでスクロール時に発生するイベントや、スクロール位置の取得等についてまとめました。
要素スクロール時のイベント - scroll
要素がスクロールした時のイベントとして関数を指定できます。window
やCSSのoveflow
が scroll である要素などに使用可能です。
$(window).scroll(function() { // windowがスクロールされた時に実行する処理 }); $("div").scroll(function() { // div要素内でスクロールされた時に実行する処理 });
この書き方はbind("scroll", fun)
と同じです。
$(window).bind("scroll", function() { // 実行したい処理 });
要素スクロール位置(上部)の取得・指定 - scrollTop
scrollTop()
を使用した場合、要素の最上部から縦スクロールした現在位置の上部までのピクセル数を取得します。
以下のサンプルでは縦スクロールしていくとwindow上部の現在位置を表示していきます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQuery - scroll</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> </head> <body style="height:5000px;"> <p style="position:fixed; top:10px;">Scroll Top : <span id="pixcel"></span></p> <script> $(window).scroll(function() { $("#pixcel").text($(this).scrollTop()); }); </script> </body> </html>
scrollTop(val)
のように初期値を与えた場合は、要素の縦スクロール位置を指定することができます。次のサンプルでは、div要素内が40px下にスクロールされた状態で表示されます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQuery - scroll</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> </head> <body style="height:5000px;"> <div style="width:100px; height:100px; overflow:scroll;"> hoge<br>fuga<br>bar<br>foo<br>hoge<br>fuga<br>bar<br>foo </div> <script> $(function() { $("div").scrollTop(40); }); </script> </body> </html>
要素スクロール位置(左部)の取得・指定 - scrollLeft
scrollTopと基本同じですがscrollLeft()
を使用した場合、要素の最左部から横スクロールした現在位置の左端までのピクセル数を取得します。
以下のサンプルでは横スクロールしていくとwindow左部の現在位置を表示していきます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQuery - scroll</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> </head> <body style="width:5000px;"> <p style="position:fixed; top:10px;">Scroll Left : <span id="pixcel"></span></p> <script> $(window).scroll(function() { $("#pixcel").text($(this).scrollLeft()); }); </script> </body> </html>
scrollLeft(val)
のように初期値を与えた場合は、要素の横スクロール位置を指定することができます。次のサンプルでは、div要素内が40px右にスクロールされた状態で表示されます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQuery - scroll</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> </head> <body> <div style="width:100px; height:100px; overflow:scroll;"> hogefugabarfoohogefugabarfoohogefugabarfoohogefugabarfoohogefugabarfoohogefugabarfoo </div> <script> $(function() { $("div").scrollLeft(40); }); </script> </body> </html>
animateメソッドのプロパティ
animateメソッドで使用できるプロパティにscrollTop
とscrollLeft
があります。アニメーションを表現したい時はこちらを使う方がいいです。
$("html,body").animate({scrollTop:0},"slow"); $("html,body").animate({scrollLeft:0},"slow");