• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

170
Views
How to get the background to change on Horizontal Scroll

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/

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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>

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error