JavaScriptで縦スクロールを横スクロールに変換する

横スクロールできる要素で、マウスホイール（縦スクロール）でも横にスクロールできるようにしたかったのでメモしておきます。

デモ

コード

const scrollElement = document.querySelector("#scroll");

scrollElement.addEventListener("wheel", (e) => {
  if (Math.abs(e.deltaY) < Math.abs(e.deltaX)) return;
  e.preventDefault();
  scrollElement.scrollLeft += e.deltaY;
});

if (Math.abs(e.deltaY) < Math.abs(e.deltaX)) return;の行は入れなくても動作しますが、トラックパッドで直接横スクロールをした際に挙動がおかしくなるので、横スクロールされた際は処理をしないようにしています。

ちなみに、このままだと一番右までスクロールしたあとに下にスクロールが行かなくなってしまう / 一番左までスクロールしたあとに上にスクロールが行かなくなってしまうので、前後にコンテンツがある場合はe.preventDefault();の前の行に以下を挿入すると動きました。

const maxScrollLeft = scrollElement.scrollWidth - scrollElement.clientWidth;
if (
  (scrollElement.scrollLeft <= 0 && e.deltaY < 0) ||
  (scrollElement.scrollLeft >= maxScrollLeft && e.deltaY > 0)
)
  return;