html - Angular - 将垂直滚动转换为水平滚动

Question

我目前正在尝试实现水平滚动。它有效，但我正在尝试进行一些更改:
由于网络应用程序是一个单一的筛选器并且只包含这个水平滚动，我想将垂直滚动转换为水平滚动。但是如何？方法是什么？

我试过以下 js library ，但只有当 overflow 设置为 visible 时才有效，这会破坏我的应用程序。

我的水平滚动:

<div class="scroll-container align-self-center d-flex">
    <div class="cart-container align-self-center" *ngFor="let cart of carts; let i = index">
      <div class="cart-item cursor-hover position-relative" [ngStyle]="{'background-image': 'url(' + cart.image + ')'}" [class.cart-item-even]="i % 2 !== 0"
      (mouseenter)="changeBackgroundColor(i)">
        <h1 class="hover-title">{{cart.title}}</h1>
      </div>
    </div>
</div>

CSS:
.cart-item {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 22.5vw;
  height: 65vh;
}

.cart-item-even {
  height: 55vh;
  width: 20vw;
}

.cart-container {
  display: inline-block;
}

.scroll-container {
  padding: 0 15vw 0 15vw;
  box-sizing: border-box;
  overflow: auto;
  white-space: nowrap;
}

Answer 1

//ts

scroll = () => {
    function scrollHorizontally(e) {
        e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        document.getElementById('main-content').scrollLeft -= (delta*40); // Multiplied by 40
        e.preventDefault();
    }
    if (document.getElementById('main-content').addEventListener) {
        // IE9, Chrome, Safari, Opera
        document.getElementById('main-content').addEventListener("mousewheel", scrollHorizontally, false);
        // Firefox
        document.getElementById('main-content').addEventListener("DOMMouseScroll", scrollHorizontally, false);
    } else {
        // IE 6/7/8
        // document.getElementById('main-content').attachEvent("onmousewheel", scrollHorizontally);
    }
}

ngOnInit(): void {
    this.scroll();
  }