読者です 読者をやめる 読者になる 読者になる

【jQuery】要素のスクロールイベントについて(scroll, scrollTop, scrollLeft)

スポンサーリンク

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メソッドで使用できるプロパティにscrollTopscrollLeftがあります。アニメーションを表現したい時はこちらを使う方がいいです。

$("html,body").animate({scrollTop:0},"slow");
$("html,body").animate({scrollLeft:0},"slow");

参考リンク

scroll(fn) - jQuery 日本語リファレンス

.animate() | jQuery API Documentation