スクロール中の要らないhoverホバーエフェクトをキャンセルしてあげる

スクロール中の要らないホバーエフェクトをキャンセルしてあげる
前の高速化の記事
googleのなかのひとの書いたテストページより

http://jankfree.org/examples/hover.html
[2013.12.25]
jsの内容を訳してコメントつけてみました(日本語部分)
[/2013.12.25]

var timer = null;
function toggleScrollHandler() {
    if(window.onscroll) {
        //ホバー確認するかどうかのチェックボックスにチェックが入っていなければ
        //=既にファンクションが設定されている状態でこのファンクションが呼び出されたなら
        // turn off the scroll handling
        window.onscroll = null; //ファンクションをトルツメ
        container.classList.add('hoverable'); //ホバー出来る状態に変更
    } else {
        //ホバー確認するかどうかのチェックボックスにチェックが入っていれば
        //=ファンクションが設定されていない状態でこのファンクションが呼び出されたなら
        // turn on the scroll handling
        window.onscroll = function() { //ファンクションを設定
            //ホバー出来ない状態に変更
            container.classList.remove('hoverable'); //ホバー出来ない状態に変更
            //前のタイマーをクリア(200秒以内にスクロールが発生していたらホバー出来ない状態をケイゾク)
            window.clearTimeout(timer);
            //新しいタイマーをセットし、200ms後にhoverableに変更する
            timer = window.setTimeout(function() {
                // only set the hoverable class 200ms after the last scroll
                document.getElementById('container').classList.add('hoverable');
            }, 200);
        }
    }
}

スクロール中はホバーエフェクトをかけないようにクラスで管理。
スクロール終わったかな?(200ms)くらいでエフェクトを復帰させてあげている。
メモメモ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください