[jQuery] スクロール時に処理を行う（.scroll）

投稿日：2017年7月12日更新日：2018年5月2日

スクロール時に処理を行うには、.scrollを使用します。

サンプルソース

例）スクロールすると、スクロール量をコンソールに出力する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
  //スクロール時に呼ばれる
  $(window).scroll(function(){
    var top = $(window).scrollTop();    //縦スクロール量を取得
    var left = $(window).scrollLeft();  //横スクロール量を取得
    console.log("top:" + top + " left:" + left);
  });
});
</script>
</head>
<body style="height:2000px;width:2000px;">
  <input type="button" id="btn1" value="btn">
</body>
</html>

<!DOCTYPE html>

<head>

$(function(){

//スクロール時に呼ばれる

$(window).scroll(function(){

var top = $(window).scrollTop(); //縦スクロール量を取得

var left = $(window).scrollLeft(); //横スクロール量を取得

console.log("top:" + top + " left:" + left);

});

</script>

</head>

</body>

</html>

実行サンプル

スクロールすると現在のスクロール量を表示します。

解説

.scrollは、縦スクロール／横スクロール両方に反応します。

執筆者：とら