SYNCERのロゴ
アイキャッチ画像

横幅のリサイズだけ検出する方法

リサイズイベントは、スマホでは上部の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

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年8月9日 (水)
コンテンツを公開しました。