ywork2020.com

Title

スクロールトップを使えば、window変数を基準にスクロール量の取得と設定ができる

scrollTopとscrollLeftメソッドの概要

scroll とは「巻物」という意味の単語ですが、コンピューターの世界では、この意味で解釈すると分かりづらいと思われます。 コンピューター用語で解釈すると画面上に収まらない領域を見えるようにするために上下左右に移動するという意味になります。

このページではscrollTopとscrollLeftの情報を取り扱っています。 紹介する2つのメソッドではTopで縦スクロールの量にアクセスし、Leftで横スクロールの量にアクセスすることができます。 また、このメソッドはスクロールの量を取得するだけでなく指定したポジションに移動することもできます。

実機サンプル

答え: id="idAnswer1"
innerText

答え: id="idAnswer2"
innerText

サンプルコード

<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
	<p><output id="idAnswer1">innerText</output></p>
	<p><output id="idAnswer2">innerText</output></p>
	<script>
		$(window).scroll(function(){
			$("#idAnswer1").text("scrollTop: " + $(window).scrollTop());
			$("#idAnswer2").text("scrollLeft: " + $(window).scrollLeft());
		});
	</script>
</body>

このサンプルではセレクターにwindow変数を指定して、それにスクロールイベントから関数を呼び出す形で処理コードを実行しています。
$(window).scroll(function(){処理コード});
重要なのは処理コードの部分です。

サンプルコードの要点

  1. body要素を起点として縦スクロール量を取得: $(window).scrollTop(空)
  2. body要素を起点として横スクロール量を取得: $(window).scrollLeft(空)

このメソッドの補足

scrollTop及びscrollLeftメソッドは引数を空にすることで移動量を取得できますが、 引数に数値を入れることで指定した位置への移動を実行することもできます。