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

スクロール中か否かを判定する方法

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

サンプルコード

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

var isScrolling = 0 ;
var timeoutId ;

window.addEventListener( "scroll", function () {
	isScrolling = 1 ;

	// スクロールを停止して500ms後に終了とする
	clearTimeout( timeoutId ) ;

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

デモ

スクロール中だけ、変数の値が1になるのを確認しましょう。

var isScrolling = 0 ;
var timeoutId ;

window.addEventListener( "scroll", function () {
	isScrolling = 1 ;

	// スクロールを停止して500ms後に終了とする
	clearTimeout( timeoutId ) ;

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

isScrolling = 0

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