横幅のリサイズだけ検出する方法
リサイズイベントは、スマホでは上部のURLアドレス欄が出現したり引っ込んだりした時も発生してしまい、無駄な処理が実行される機会が多いです。横幅のリサイズだけを検出したい場合は、前回のinnerWidthの値を記録しておくようにしましょう。
サンプルコード
前回のウィンドウ幅と違った場合だけ、リサイズイベントの処理を実行する例です。
var lastInnerWidth = window.innerWidth ;
window.addEventListener( "resize", function () {
// 現在と前回の横幅が違う場合だけ実行
if ( lastInnerWidth != window.innerWidth ) {
// 横幅を記録しておく
lastInnerWidth = window.innerWidth ;
// 処理内容
}
} ) ;
デモ
横幅のリサイズを行なった時だけ、カウントが増加するのをご確認下さい。スマホの場合は、URLアドレス欄の表示、非表示の切り替わりでカウントが増加しないのを確認しましょう。
var lastInnerWidth = window.innerWidth ;
var count = 0 ;
window.addEventListener( "resize", function () {
if ( lastInnerWidth != window.innerWidth ) {
lastInnerWidth = window.innerWidth ;
++count ;
}
} ) ;
count = 0
関連記事
- リサイズイベントの頻度を減らす方法
- リサイズイベントの頻度を減らすには、setTimeout()で発火するタイミングを調節します。
- リサイズ終了時に処理を実行する方法
- リサイズを停止したタイミングで処理を実行するには、setTimeout()を利用します。
- リサイズ中か否かを判定する方法
- ユーザーがリサイズ中か否かを判定するには、resizeイベントとsetTimeout()を利用します。
- 何番目の要素か確認する方法
- 要素が何番目にあるのかを確認するには、配列系メソッドのindexOf()を利用しましょう。
- スクロール終了時に処理を実行する方法
- スクロールを停止したタイミングで処理を実行するには、setTimeout()を利用します。
- リサイズ中だけスタイルを適用する方法
- リサイズ中だけスタイルを適用するには、classListとsetTimeout()を利用します。