【JavaScript】縦スクロールを横スクロールにするメモ(ついでに画面幅が変わってもいい感じになるよう調整するCSSも)

横並びの画面からはみ出してるコンテンツを全部見てもらいたいとき、スクロールするだけで横に動いたらいいなーってことないですか?

yukipan的には横にはみ出してるより縦並びで全部見れたほうが親切じゃないかと思う派なんだけど、コンテンツがたくさんあるとそうもいかない場合もあり・・

ということで、横スクロールできるコードをメモしておく。

あと、画面幅が変わってもいい感じになるよう、コンテンツ幅1000pxで仮に設定して、カードが4枚ある場合、右に2枚目のカードが少し見える仕様のCSS(SCSS)もメモしておく。
(カード間の間隔は20pxに設定)

HTML

<div class="box mt40" id="scrollX">
  <ul class="list">
    <li class="item">
      imgとかコンテンツ入れる
    </li>
    <li class="item">
      imgとかコンテンツ入れる
    </li>
    <li class="item">
      imgとかコンテンツ入れる
    </li>
    <li class="item">
      imgとかコンテンツ入れる
    </li>
  </ul>
</div>

SCSS

.box{
  width: 100%;
  overflow-x: auto;
  /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
  -ms-overflow-style: none;
  /*Firefoxへの対応*/
  scrollbar-width: none;
  /*Google Chrome、Safariへの対応*/
  &::-webkit-scrollbar{
  display: none;
  }
  .list{
    display: flex;
    flex-direction: row;
    width: calc((100% - 5% * 2 - 20px) * 4);
    margin-left: 5%;
    margin-right: 5%;
    @media (min-width: 1000px) {
      max-width: calc(1000px * 4);
      width: calc(100% * 4);
      margin-left: calc(50% - 1000px / 2);
      margin-right: calc(50% - 1000px / 2);
    }
    .item{
      max-width: calc(1000px - 20px);
      width: calc(100% - 20px);
      &:not(:first-child){
        margin-left: 20px;
      }
    }
  }//.list
}//.box

JavaScript

const scrollX = document.querySelector("#scrollX");

scrollX.addEventListener("wheel", (e) => {
  if (Math.abs(e.deltaY) < Math.abs(e.deltaX)) return;

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

  e.preventDefault();
  scrollX.scrollLeft += e.deltaY;
});

参考にさせてもらったサイト紹介

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

トラックパッドで直接横スクロールした場合や、コンテンツの端まで来たときの挙動の調整など親切に解説してありわかりやすかったです。
ありがとうございます。

ABOUT US
yukipan
Web制作会社で働いてます。パンダとかリラックマとか、まあるいものが好き。好奇心旺盛で、何にでも興味をもってしまう。とりあえずやってみてから取捨選択するのがモットー。今はグリーンカレーとチャイと株式投資がブーム。