Swiper.jsのスライドをトラックパッドでスクロールすると数ページ分一気にスクロールされてしまう問題

あらすじ

jQuery不要で簡単にスライドが実装できるSwiper.jsをとあるプロジェクトで導入したのですが、なかなかいい感じでした。
ヨコ方向のスライドだけでなく、タテ方向のスライドも作れてマウスのホイールでもスクロールできるのでとても気に入りました。

ところが、テストユーザから一気に何ページもスクロールしてしまうという声が上がりました。
自分の環境ではしっかりテストしたのでそんなはずはないと思ったのですが、よくよく聞いてみるとその人はマウスではなくトラックパッドでスクロールしていたことが分かりました。

試しに私も確認してみると、確かにトラックパッドでシュッと勢いよくスクロールすると一気に数ページスクロールしてしまいました。

Swiper.jsでマウスホイールを有効にするには

タテ方向のスライドの場合はマウスのホイールでスクロールさせたいですよね。
そのためにはmousewheelをtrueにするだけです。

var swiper = new Swiper(".mySwiper", {
  direction: "vertical",
  mousewheel: true, // マウスホイールを有効にする
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
});

Swiperのデモページでも上記のようにしているので何の疑いもなくその通りにしたのですが、これがちょっとした罠だったのです。
https://swiperjs.com/demos#mousewheel-control

前述の通り、これだとトラックパッドでスクロールすると一気に数ページスクロールされてしまいます。

トラックパッドでもいい感じにスクロールさせるには

トラックパッドでシュッとやると勢いよく何ページも一気にスクロールしてしまいますが、これはSwiper.jsがトラックパッドのシュッを敏感に捉えすぎてしまうからです。
そして、これに関する設定もちゃんとあります。
私は見落としていました。

マウスホイールを有効にする際にmousewheelをtrueとしないで細かい設定項目を入れることができます。
その中でもthresholdDeltaという項目が今回のケースでは重要になります。

Swiper.jsのサイトを見るとthresholdDeltaの項目にはMinimum mousewheel scroll delta to trigger swiper slide changeと書いてあります。
https://swiperjs.com/swiper-api#mousewheel-control

要は「マウスのスクロールをどれくらいの感度で検知するか」というような設定項目です。

javascriptのソースはこんな感じになります。
とりあえず100でそれっぽく動いたので100としました。

var swiper = new Swiper(".mySwiper", {
  direction: "vertical",
  mousewheel: {
    thresholdDelta: 100, // コレ
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
});

ちなみに、sensitivityも感度に関する項目のようですが私が試した感じではあまり変化を感じられませんでした。