スクロール中か否かを判定する方法
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
関連記事
- スクロール量を取得する方法
- スクロール量を取得するには、window.pageYOffsetを参照しましょう。
- スクロールをする方法
- 絶対的、相対的に位置を指定して、スクロールします。
- クリックした位置を取得する方法
- マウスでクリックした位置を取得するには、eventオブジェクトのpageX、pageYを参照します。
- 指定文字を置換、削除する方法
- 文字列の中の指定した部分を置換したり削除します。
- リサイズ中か否かを判定する方法
- ユーザーがリサイズ中か否かを判定するには、resizeイベントとsetTimeout()を利用します。
- リサイズ終了時に処理を実行する方法
- リサイズを停止したタイミングで処理を実行するには、setTimeout()を利用します。