リサイズ中だけスタイルを適用する方法
リサイズ操作の間だけスタイルを適用したい時は、classListとsetTimeout()と組み合わせましょう。
サンプルコード
リサイズ中だけ、背景色を赤にするサンプルコードです。
.active {
background-color: red ;
}
var timeoutId ;
window.addEventListener( "resize", function () {
// element = <div></div>
element.classList.add( "active" ) ;
clearTimeout( timeoutId ) ;
timeoutId = setTimeout( function () {
element.classList.remove( "active" ) ;
}, 500 ) ;
} ) ;
デモ
リサイズ中に枠内の黄色い部分が赤くなるか確認して下さい。
var timeoutId ;
window.addEventListener( "resize", function () {
element.classList.add( "active" ) ;
clearTimeout( timeoutId ) ;
timeoutId = setTimeout( function () {
element.classList.remove( "active" ) ;
}, 500 ) ;
} ) ;
関連記事
- リサイズ中か否かを判定する方法
- ユーザーがリサイズ中か否かを判定するには、resizeイベントとsetTimeout()を利用します。
- スクロール終了時に処理を実行する方法
- スクロールを停止したタイミングで処理を実行するには、setTimeout()を利用します。
- リサイズ終了時に処理を実行する方法
- リサイズを停止したタイミングで処理を実行するには、setTimeout()を利用します。
- 2点の座標の中点を求める方法
- 2点の座標の中点を求める公式を、JavaScriptで表現します。
- スクロール中だけスタイルを適用する方法
- スクロール中だけスタイルを適用するには、classListとsetTimeout()を利用します。
- ドラッグオーバー中だけスタイルを適用する方法
- ドロップできる要素にドラッグオーバー中だけスタイルを適用するには、dragoverイベントと、setTimeout()を組み合わせましょう。