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

リサイズ中か否かを判定する方法

JavaScriptで、リサイズ中には行ないたくない処理があるかもしれません。ユーザーがリサイズ中か否かを判定するには、事前にresizeイベントとsetTimeout()で仕組みを作っておきましょう。

サンプルコード

グローバル変数のisResizingには、ユーザーがスクロール中には1が、スクロールを停止してから500ms後には0が代入されます。この変数の値で、スクロール中か否かを判定しましょう。

var isResizing = 0 ;
var timeoutId ;

window.addEventListener( "resize", function () {
	isResizing = 1 ;

	// リサイズを停止して500ms後に終了とする
	clearTimeout( timeoutId ) ;

	timeoutId = setTimeout( function () {
		isResizing = 0 ;
	}, 500 ) ;
} ) ;

デモ

リサイズ中だけ、変数の値が1になるのを確認しましょう。

var isResizing = 0 ;
var timeoutId ;

window.addEventListener( "resize", function () {
	isResizing = 1 ;

	// リサイズを停止して500ms後に終了とする
	clearTimeout( timeoutId ) ;

	timeoutId = setTimeout( function () {
		isResizing = 0 ;
	}, 500 ) ;
} ) ;

isResizing = 0

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