jQueryで使われる画面変化イベントについてまとめました。
画面変化イベントは、スクロールしたり画面サイズを変更したりするなどしてイベントが発火します。この記事で基礎知識をインプットしましょう！
また、各セクションでjQueryのイベントごとの解説記事を紹介していますので合わせてご一読ください。
この記事で身につく内容
- jQueryの画面変化イベントの基礎知識
【jQuery】画面変化イベントのまとめ
jQueryの画面変化イベントは、次のようなものがあります。
scroll()：スクロール中にイベント発火resize()：画面サイズを変更するとイベント発火
それぞれのイベントについて簡単に紹介していきます。
scroll()イベントについて
scroll()イベントは、スクロール中にイベントを発火させることができます。
scrollの基本書式
$("要素").scroll(function(){
// ページがスクロールされたときに実行させたい処理内容
});上の書式にコードを当てはめると次のようになります。
<div class="scroll-area">
<div class="box"></div>
</div>.scroll-area {
overflow: scroll;
height: 200px;
border: 1px solid black;
width: 50%;
}
.box {
width: 200px;
height: 200px;
background: orange;
margin: 20px;
}$('.scroll-area').scroll(function () {
console.log("scroll!");
});出力結果
scroll()については、下記の記事でも紹介しています。
resize()イベントについて
resize()イベントは、画面サイズを変更するとイベントが発火します。
resize()の基本書式
$(window).resize(function(){
// 画面サイズが変更されたときに実行させたい処理内容
});コードを実際に当てはめると、次のようになります。
$(window).resize(function () {
console.log("resize!");
});出力結果
resize()については、下記の記事でも紹介しています。
まとめ
スクロールしたり画面サイズを変更するなどで発火する画面変化イベントは、制作で使われます。基礎知識をインプットして実際に手を動かしてみましょう。
jQueryにはその他のさまざまなイベントがあるので、組み合わせて使用しましょう！
jQuery画面変化イベントまとめ
scroll()：スクロール中にイベント発火resize()：画面サイズを変更するとイベント発火
