jQuery addClass example

Change class name on click in jQuery

HTML

<div class="scroll_outer-wrapper">
    <div class="scroll_wrapper">
        <section class="scroll_section one"><h2>section 1</h2></section>
        <section class="scroll_section two"><h2>section 2</h2></section>
        <section class="scroll_section three"><h2>section 3</h2></section>
        <section class="scroll_section four"><h2>section 4</h2></section>
    </div>
</div>

SCSS

.scroll {
  &_outer-wrapper {
    width: 100vh;
    height: 100vw;
    transform: rotate(-90deg) translateX(-100vh);
    transform-origin: top left;
  
    /* I have to comment these two lines in order for the left and right scroll to work
       HOWEVER, the up and down scroll won't work.
       
       If I uncommend these two lines, the up and down scroll will work as expected, but the left and right scroll won't work anymore.
    */
    overflow-y: scroll;
    overflow-x: hidden;
    position: absolute;
  }

  &_wrapper {
    display: flex;
    flex-direction: row;
    width: 400vw;
    transform: rotate(90deg) translateY(-100vh);
    transform-origin: top left;
    transition: transform .5s ease;
  }

  &_section {
    width: 100vw;
    height: 100vh;

    &.one{background: black; color: white;}
    &.two{background: white; color: black;}
    &.three{background: black; color: white;}
    &.four{background: pink; color: black;}
  }
}

#scrollBtn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: darkblue;
    color: white;
    border: none;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 20px;
    cursor: pointer;
}

JavaScript

$(function() {
    var lastPos = 0;
    
     $(window).scroll(function() {
        var currPos = $(document).scrollLeft();
    
        if (lastPos < currPos) {
            console.log('scroll right');
        } 
        if (lastPos > currPos) 
        {
            console.log('scroll left');
        }
    
        lastPos = currPos;
    });
});