角度 - 将垂直滚动转换为水平滚动

Question

我目前正在尝试实现水平滚动。它有效，但我正在尝试进行一些更改：
由于网络应用程序是一个筛选器，并且仅由此水平滚动组成，因此我想将垂直滚动转换为水平滚动。但是怎么做呢？方法是什么？

我已经尝试了以下 js 库，但这个库仅在溢出设置为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();
}

Answer 2

对于水平滚动，您可以在div 中做任何您想做的事情，如下所示：

.mydiv {
overflow-x: scroll;
display: -webkit-box;
}

我希望这会帮助你:)