マウスホイールによる横スクロールのスムーズ化（備忘録）

マウスホイールで横スクロールさせるぞ！

webサイト制作で縦書きのレイアウトなんかを作ると、マウスホイールで横にスクロールさせたくなります。

// ホイールイベントリスナーを追加
this.addEventListener('wheel', function(e) {
    // デフォルトの垂直スクロールを防止
    e.preventDefault();
    
    // 横スクロール実行
    this.scrollLeft -= e.deltaY;
});

よし！

営業「なんかカクカクスクロールして見栄えが悪い」

うるせえな。
とは中々言えないので、直します。

// ホイールイベントリスナーを追加
this.addEventListener('wheel', function(e) {
    // デフォルトの垂直スクロールを防止
    e.preventDefault();
    
    // スクロール量を計算（感度調整可能）
    const sensitivity = 1.5; // 感度：小さいほど緩やか
    const delta = (e.deltaY || e.detail || e.wheelDelta) * sensitivity;
    
    // 横スクロール実行
    this.scrollLeft -= delta;
}, { passive: false });

感度を設定して多少ぬるぬる動くようにしました。
これでましになるでしょう。