jQueryでのスクロールイベント【現役エンジニアが解説】

PROGRAM

今回は、jQueryでのスクロールイベントについて、簡単に解説していきます。

scrollメソッド

jQueryではスクロールイベントを検知できます。

window要素にscrollメソッドを設定することで可能となります。

$(window).scroll(function() {
  var top = $(this).scrollTop(); // Top
  var left = $(this).scrollLeft(); // Left
});

上記の例では、スクロールイベント時にTopとLeftプロパティの値を取得しています。

bindメソッド

srollメソッドではなくbindメソッドも使えます。

bindメソッドも基本的に行っていることはscrollメソッドと同じです。

$(window).bind("scroll", function() {
  var top = $(this).scrollTop(); // Top
  var left = $(this).scrollLeft(); // Left
});

上記のコードでは、スクロールイベント時にTopとLeftプロパティの値を取得しています。

要素のスクロールイベント

要素にスクロールバーがあることも考えられます。

その場合には、window要素ではなく、その要素に対してメソッドを使います。

$("#hoge").scroll(function() {
  var top = $(this).scrollTop(); // Top
  var left = $(this).scrollLeft(); // Left
});

上記のコードの例では、hogeというidを持つ要素のスクロールイベント時にTopとLeftプロパティの値を取得しています。