jQueryでスクロールによって制御したい

Question

上にスクロールすると要素を表示・下にスクロールすると要素を消すスクリプト

$(window).on("load", function () {
    const div = $(".element");
    let before = $(window).scrollTop();
    $(window).on("scroll touchmove", function () {
        let after = $(window).scrollTop();
        if (before > after) {
            div.show(200);
        } else if (before < after) {
            div.hide(200);
        }
        before = after;
    });
});

このコードですと、スクロールしている間は毎度hide()やshow()メソッドが呼ばれることになりますよね？
slideToggle()などを使った場合は恐ろしいことになってしまいます。

また、スマホの場合、指の動き的にスクロールした際に最後だけちょっと逆方向にスワイプしてしまうことがよくあると思います。（表現が下手で申し訳ないです。）
指をスワイプさせたときに、指を定位置に戻すので、その動きがちょっと検出されちゃうようです。

なので、上記スクリプトの場合、スマホで下スクロールしても上スクロールの処理がされてしまうことが頻繁にあります。

• スクロール中に何度も処理が繰り返されるのを何とかしたい
• スマホでの挙動を安定させたい

上記２点が知りたいです。

解決策等ありましたらお願いいたします。

Answer 1

ある程度以上スクロールしなければ動作しないようにするとか

if (Math.abs(before - after) < 10) {
    return;
}

タイマーで定期監視するとか(これはどちらがいいかわかりません)。

ほかに参考になりそうなところを挙げておきます。

JavaScriptでの多発するイベントの間引き処理
http://blog.tsumikiinc.com/article/20141125_javascript-event-throttle.html

scroll, resizeイベントの負荷を抑制する
https://w3g.jp/blog/intermittent_event_load_reduce

【JavaScript】webサイトのレスポンスが悪くなってしまう前に知っておきたかった記事まとめ。
http://nkmrkisk.com/archives/1306

Comments

[kurosuke___]

一定以上のスクロールで動作するようにして解決しました！ありがとうございました！

Answer 2

こんなアイディアがありますね。

スクロールストップを通知するjQueryイベントの作り方 | ライズウィルスタッフブログ

Comments

[kurosuke___]

回答ありがとうございました！