CODEWITHSUNDEEP
javascripthtmljquerycss
ZUH.
ZUH.

Reputation: 195

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/

Upvotes: 2

Views: 507

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

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>

Upvotes: 1

Related Questions