Tengo el siguiente código que funciona en el desplazamiento vertical pero no cuando cambio el cuerpo al desplazamiento horizontal.
Parece que tampoco puedo agregar una sección adicional al ciclo else, podría estar haciendo algo mal, pero seguí recibiendo un error.
$(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'); } }); }); 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 } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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>Esto es lo que tengo en este momento: https://jsfiddle.net/70wdmgLz/
El problema se debe a que está vinculando el controlador de eventos de scroll al document , sin embargo, es el elemento .main-wrap el que en realidad se está desplazando. Vincule el evento a ese elemento y el código funciona:
jQuery($ => { $('.main-wrap').on('scroll', e => { var scroll_pos = $(e.target).scrollTop(); $("body").css('background-color', scroll_pos > 500 ? '#F00' : '#000'); }); }); 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; color: #CCC; } /* 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 } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main-wrap"> <div class="inner-wrap"> <section class="section1"> SECTION1 </section> <section class="section2"> SECTION2 </section> <section class="section3"> SECTION3 </section> </div> </div>