jQuery - scroll イベント

公開日：2018-12-28 更新日：2019-05-14
[jQuery]

1. 概要

スクロールした時に scroll イベントが発生します。

$(window).on("scroll", function(e) {
	処理;
});

$(セレクタ).on("scroll", function(e) {
	処理;
});

2. サンプル

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <hr />

  <div>
    <div id="log" style="width:50%; float:left;"><div>log</div></div>
    <div id="main" style="width:50%; height:300px; overflow:scroll; float:left;">
      <div style="height:1000px; width:1000px; border:5px red solid;"></div>
    </div>
    <div style="clear:both;"></div>
</div>

  <script>

    //$(window).on("scroll", function(e) {
    $("#main").on("scroll", function(e) {
      log("scrollTop = "  + $(this).scrollTop() +
        ", scrollLeft = " + $(this).scrollLeft() );
    });

    //ログ出力
    var no = 1;
    function log(msg) {
      $("#log").append ('<div>' + no++ + ":" + msg + '</div>');
      if ($("#log div").length > 10) $("#log div:first").remove();
    }

  </script>
</body></html>

右側の赤線があるエリアのスクロールバーを移動すると、ログ出力されます。
実行結果：画面



Tag

New Article