1. ホーム
  2. javascript

[解決済み] JavaScriptでウィンドウのサイズ変更を検出する ?

2022-07-06 10:33:39

質問

ユーザーがブラウザのウィンドウサイズを変更したときに、jQueryまたはJavaScriptで関数をトリガーする方法はありますか?

他の言葉で言うと

  1. ユーザがブラウザのウィンドウサイズを変更したときに、mouse up イベントを検出できますか?そうでなければ
  2. ウィンドウのリサイズ操作が終了したとき、検出することができますか?

私は現在、ユーザーがウィンドウのサイズ変更を開始したときに、jQueryでイベントをトリガすることができるだけです。

どのように解決するのですか?

あなたは .resize() のようにすると、実際に幅や高さが変わるたびに取得できます。

$(window).resize(function() {
  //resize just happened, pixels changed
});

動作デモはこちらでご覧いただけます。 を実行すると、新しい height/width の値が取得され、ページ内で表示されるように更新されます。 このイベントは実際には 開始 または 終了 を使用すると、リサイズが発生したときに "happens" が発生するだけで、別のリサイズが発生しないとは言い切れません。


編集します。 コメントにより、あなたは"on-end"イベントのようなものを望んでいるようですが、あなたが見つけた解決策は、いくつかの例外を除いてこれを行います(マウスアップと一時停止をクロスブラウザで区別することができず、同じことがイベントにもあてはまります)。 終了 ポーズ ). あなたは 作成 を作成することができます。

$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

これをどこかのベースファイルにすることもできますし、やりたいことは何でもできます...そして、その新しい resizeEnd イベントにバインドすることができます。

$(window).bind('resizeEnd', function() {
    //do something, window hasn't changed size in 500ms
});

この手法の動作デモはこちらでご覧いただけます。