单击按钮后在水平div内滚动x像素

Question

我有一个包含多个部分的包装器，其中的滚动是水平的（我使用CSS旋转div并实现此效果）。我想单击一个按钮，一次滚动100px，直到到达结尾，然后说div。

我尝试将scrollTop设置为0，然后在单击按钮后对其进行更新，但这似乎无法解决问题。谁能向我解释我如何实现这种效果？

为方便起见，这是一个Fiddle也是一个摘要：

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

您需要将父元素.scroll_outer-wrapper和scrollTop用作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>