ywork2020.com

Title

ウィンドウにスクロールイベントを登録する

目次 (INDEX)

scrollとは

ここで説明する scroll とは次の語句からなるjQueryのメソッドです。
scroll
読み: スクロール
意味: 巻物を巻く。巻いたもの。画面を移動して別の部分を表示させること。

目次に戻る

scrollメソッドの概要

このメソッドは、ブラウザのウィンドウ (window オブジェクト) にスクロールイベントをバインドします。 また、メソッドの引数を空にした場合には既にバインドされているスクロールイベントを呼び出します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

$(window).scroll(Handler(EventObject));
$(window).scroll([EventData], Handler(EventObject));
$(window).scroll();
  • 01: スクロールイベントが発生した時点でハンドラーが実行されます。
  • 02: ハンドラーの引数であるイベントオブジェクトにデータを添付して実行します。
  • 03: セレクタにバインドしているスクロールイベントを呼び出します。

目次に戻る

サンプルコードと実行結果

このサンプルは、既に表示されていると思いますが、 ウィンドウのスクロール量を output 要素に出力しています。

サンプルコード: CSS
<style>
	#idOutput{
		display: block;
		position: fixed;
		left: 50%;
		top: 80%;
		background-color: ##lightpink;
		border: thin solid ##lightgray;
		width: 180px;
		text-align: center;
	}
</style>
  • 04: position (要素の位置指定を行っています。fixed は left や top の値をウィンドウの絶対値として扱います。)
  • 05: left (要素の水平位置を指定しています。)
  • 06: top (要素の垂直位置を指定しています。)
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<output id="idOutput">innerText</output>
	<script>...</script>
</body>
  • 06: output (識別子に idOutput をもつ要素です。ここではスクロールの垂直位置をピクセル単位で表示するための要素となります。)
サンプルコード: script
<script>
	$(window).scroll(function(){
		$("#idOutput").text($(this).scrollTop() + " px");
	});
	$(window).scroll();
</script>
  • 02-04: scroll(Handler(){処理}) (ウィンドウにスクロールイベントをバインドしています。これにより、ウィンドウがスクロールする度に 処理 の部分のコード 「03行目」が実行されます。)
  • 05: $(window).scroll() (ウィンドウにバインドされたスクロールイベントを実行します。ここではスクロール位置の初期表示のために必要でした。)
innerText

目次に戻る