[JavaScript] スクロールイベントを取得する（onScroll）

投稿日：2018年4月15日更新日：2018年5月2日

スクロールイベントを取得するには、onscrollイベントハンドラを使用します。

サンプルソース

スクロールすると、スクロール量を表示するサンプルです。
タグにonscrollを記述する方法と、記述しない方法の２通りの書き方ができます。

例１）タグにonscrollを記述する方法

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script>
function test(){
  var a = document.documentElement.scrollTop;
  console.log(a);
};
</script>
</head>
<body style="height:3000px;" onscroll="test()">
あいう
</body>
</html>

<!DOCTYPE html>

<head>

function test(){

var a = document.documentElement.scrollTop;

console.log(a);

};

</script>

</head>

あいう

</body>

</html>

例２）タグにonscrollを記述しない方法

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script>
window.onscroll = function(){
  var a = document.documentElement.scrollTop;
  console.log(a);
};
</script>
</head>
<body style="height:3000px;">
あいう
</body>
</html>