I've got the following code which works on vertical scrolling but not when I change the body to horizontal scroll.
I also can't seem to add an extra section to the else loop as well, might be doing something wrong but I kept getting an 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>This is what I've got at the moment: https://jsfiddle.net/70wdmgLz/
The issue is because you're binding the scroll event handler to the document, however it's the .main-wrap element which is actually being scrolled. Bind the event to that element and the code works:
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>