css horizontal scroll

item 1

item 2

item 3

item 4

item 5

item 6

item 7

item 8

<style>
.horizontal-scroll-wrapper {
    width: 200px;
    height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    transform: rotate(-90deg) translateY(-200px);
    transform-origin: right top;
}

    .horizontal-scroll-wrapper > div {
        width: 200px;
        height: 200px;
        background-color: gold;
        margin: 10px 0;
        transform: rotate(90deg) translateX(200px);
        transform-origin: right top;
        text-align:center;
        padding-top:30px;
        color: red;
        font-size: 30px;
    }
</style>

 <div class="horizontal-scroll-wrapper">
        <div>item 1</div>
        <div>item 2</div>
        <div>item 3</div>
        <div>item 4</div>
        <div>item 5</div>
        <div>item 6</div>
        <div>item 7</div>
        <div>item 8</div>
    </div>

reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
https://css-tricks.com/pure-css-horizontal-scrolling/