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

<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>

.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

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;
});