Scroll for x pixels inside a horizontal div after click on button

Question

I have a wrapper with multiple sections in it, in which the scroll is horizontal (I used CSS to rotate the div and achieve this effect). I want to click on a button and scroll about 100px at a time, until I reach the end, inside said div.

I tried setting the scrollTop to 0 and then updating it after clicking the button, but this doesn't seem to solve the issue. Could anyone explain to me how I can achieve this effect?

Here's a Fiddle and also a snippet, for your convenience:

var scrollWrapper = $('.scroll_wrapper');
var scrollBtn = $('#scrollBtn');

scrollWrapper.scrollTop = 0;
$('#scrollBtn').on('click', function() {
   scrollWrapper.scrollTop += 10;
});

.scroll_outer-wrapper {
    width: 100vh;
    height: 100vw;
    transform: rotate(-90deg) translateX(-100vh);
    transform-origin: top left;
    overflow-y: scroll;
    overflow-x: hidden;
    position: absolute;
  }

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

.scroll_section {
    width: 100vw;
    height: 100vh;
}

.scroll_section.one{background: black; color: white;}
.scroll_section.two{background: white; color: black;}
.scroll_section.three{background: black; color: white;}
.scroll_section.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

<button id="scrollBtn">Click to Scroll</button>

Answer 1

You need to use the parent element .scroll_outer-wrapper, and scrollTop as a function:

var scrollWrapper = $('.scroll_outer-wrapper');
var scrollBtn = $('#scrollBtn');

scrollWrapper.scrollTop(0)
$('#scrollBtn').on('click', function() {
  scrollWrapper.scrollTop(scrollWrapper.scrollTop() + 10)
});

.scroll_outer-wrapper {
  width: 100vh;
  height: 100vw;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  overflow-y: scroll;
  overflow-x: hidden;
  position: absolute;
}

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

.scroll_section {
  width: 100vw;
  height: 100vh;
}

.scroll_section.one {
  background: black;
  color: white;
}

.scroll_section.two {
  background: white;
  color: black;
}

.scroll_section.three {
  background: black;
  color: white;
}

.scroll_section.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

<button id="scrollBtn">Click to Scroll</button>