JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-wrap">
  <div class="inner-wrap">
  
  <section class="section1">
    SECTION1
  </section>
  <section class="section2">
    SECTION2
  </section>
    <section class="section3">
    SECTION2
  </section>
  
</div>  
</div>

CSS

body {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.section1, .section2, .section3 {
  background-color: transparent;
  width:100vw; height:10vh
}


/* horizontal styles */
.main-wrap{
width:100vh;
  height:100vw;
  overflow-x:hidden;
  overflow-y: scroll;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left; 
  position:absolute;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.inner-wrap{
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left; 
  display:flex;
  flex-direction: row; 
  width: 300vw;
}

::-webkit-scrollbar{
display:none
}

JavaScript

$(document).ready(function(){       
        var scroll_pos = 0;
        $(document).scroll(function() {
            scroll_pos = $(this).scrollTop();
            if(scroll_pos > 500) {
                $("body").css('background-color', 'red');
            } 
            else {
                $("body").css('background-color', 'black');
            } 
        });
    });