React Force horizontal scrolling as vertical scroll when reaching element view

I’ve been trying to achieve this effect of default horizontal scrolling when reaching element’s view.
I still could not find some decent way to implement it correctly, for now I was only able to achieve it with pure CSS (the problem is – it doesn’t scrolled horizontal correctly, I need to click on the element so it will be aware I’m in the right view.
This is my code for now –

::-webkit-scrollbar {
      width: 1px;
      height: 1px;
    }

    ::-webkit-scrollbar-button {
      width: 1px;
      height: 1px;
    }


    .test {
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      width: calc(250px + 1px);
      max-height: 750px;
      margin: 0;
      padding-top: 1px;
      background: #abc;
      overflow-y: auto;
      overflow-x: hidden;
      transform: rotate(-90deg) translateY(-250px);
      transform-origin: right top;
      padding: 250px 0 0 0;
    }

    .test div {
      display: block;
      padding: 5px;
      background: #cab;
      transform: rotate(90deg);
      transform-origin: right top;
      width: 250px;
      height: 250px;
      margin: 10px 0;
    }

<div class="test">
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
    </div>

I’d love to know if there is any way to make the scrolling automatically start horizontally as I reach the view, and if that’s not possible I’d love to know how would you implement it with JS in React.
Thank you!