スクロール中だけスタイルを適用する方法
スクロールの間だけスタイルを適用したい時は、classListとsetTimeout()と組み合わせましょう。
サンプルコード
スクロール中だけ、背景色を赤にするサンプルコードです。
.active {
background-color: red ;
}
var timeoutId ;
window.addEventListener( "scroll", function () {
// element = <div></div>
element.classList.add( "active" ) ;
clearTimeout( timeoutId ) ;
timeoutId = setTimeout( function () {
element.classList.remove( "active" ) ;
}, 500 ) ;
} ) ;
デモ
スクロール中に枠内の黄色い部分が赤くなるか確認して下さい。
var timeoutId ;
window.addEventListener( "scroll", function () {
element.classList.add( "active" ) ;
clearTimeout( timeoutId ) ;
timeoutId = setTimeout( function () {
element.classList.remove( "active" ) ;
}, 500 ) ;
} ) ;
関連記事
- スクロール中か否かを判定する方法
- ユーザーがスクロール中か否かを判定するには、scrollイベントとsetTimeout()を利用します。
- スクロールをする方法
- 絶対的、相対的に位置を指定して、スクロールします。
- タッチした位置を取得する方法
- スマホなどでタッチした位置座標を取得します。
- リサイズ中だけスタイルを適用する方法
- リサイズ中だけスタイルを適用するには、classListとsetTimeout()を利用します。
- リサイズ終了時に処理を実行する方法
- リサイズを停止したタイミングで処理を実行するには、setTimeout()を利用します。