javascriptのwheelイベントとmacのトラックパッド操作について

Question

マウスのホイールで次の要素に切り替わる処理を実装したいのですが、
macのトラックパッドが慣性スクロールをデフォルトの仕様としているため、
強くスクロールすると次々と処理が走ってしまい、うまく制御できません。

window.addEventListener("wheel", (event) => {
               if (event.wheelDeltaY < 0) {
                    console.log("下方向へホイール")
                } else if (event.wheelDeltaY > 0) {
                    console.log("上方向へホイール")
                }
}

このような処理を書いています。
flagで管理してもDeltaYが0になるまでflagを解除出来ないとなると、
かなり時間がかかってしまい操作がしにくい感じがします。

fullpage.js(https://alvarotrigo.com/fullPage/)が理想の挙動なのですが、、。
自作で処理を実装する場合のアドバイスを頂きたいです。。
よろしくお願いいたします。

一回のホイールでifの中の処理が一度動いて欲しい感じになります。
(強くトラックパッドでスクロールすると、deltaYが500くらいから0になるまで走り続けるので、処理が連続して実行されてしまうのを改善したいです。)

Comments

[kyoya0819]

ifの中の処理をもっとゆっくりやりたいってことですよね？

[okpk]

追記させていただきました。
理想としては一度のホイールで一度だけ処理が実行される。というものです。
(macだと慣性スクロールが働くので、すぐにホイールが止まらず連続して処理が実行されてしまうのが課題です。)

Answer 1

慣性が止まらない間に連続でホイール操作された場合には検知したいのか、それともしたくないのか、が気になりました。

とりあえず、動作確認できる環境がないので動くかどうかわかりませんが、このようにしてみてはいかがでしょうか。

const wheel = ( ( flag = false, timerId = null) => event => {
               clearTimeout( timerId );
               timerId = setTimeout( () => flag = false, 1000); // 1秒空いたらリセット
               if (flag) return;
 
               if (event.wheelDeltaY < 0) {
                    console.log("下方向へホイール")
                } else if (event.wheelDeltaY > 0) {
                    console.log("上方向へホイール")
                }
               flag = true;
} )();
window.addEventListener("wheel", wheel);