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

スクロール中だけスタイルを適用する方法

スクロールの間だけスタイルを適用したい時は、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 ) ;
} ) ;
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年8月9日 (水)
コンテンツを公開しました。