水平方向平滑滚动100像素。

Question

嗨，Heyjo，

问题：我正在寻找一段JavaScript或jQuery代码，以便在我的网站上实现滚动按钮。我已经尝试了一个星期，但我失败了。问题出现在当按钮需要多次工作时：它的任务不是滚动到指定的元素，而是向左滚动，比如100像素。此外，滚动应该在适当的部分平稳地进行（换句话说，是动画效果）。

我尝试过的方法：到目前为止，我尝试使用$('#idofsection').animate({scrollLeft: 100}, 800)来完成这个任务，但显然它没有起作用。问题是，它不能被多次使用，它只是滚动到我的部分的某个位置。之后，我使用了JavaScript的scrollBy(100, 0)或scrollLeft += 100px，但不幸的是，我没有使其平稳滚动。

我希望有人能帮助我，因为我在这个问题上花费了很多时间，却没有找到解决方案。非常感谢，Sven

- Sven

Answer 1

您可以像之前尝试的那样使用scrollBy(100, 0)，并将该CSS属性添加到要滚动的视口中：

scroll-behavior: smooth;

.window{
  width: 200px;
  height: 100px;
  border: 1px red solid;
  overflow: hidden;
  scroll-behavior: smooth;
}
.container{
  width: 1000px;
  height: 200px;
}
.buttons{
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

<div id="window" class="window">
  <div class="container">
    fjsdlf jslkd flsakj flksad jflkjsa dlfj slakd jflskad flksdaj lfk sadlkfj asldk fslkad fjlkasd flksa jdlf jsadlkfj slkda jflksadj flksa jdlkfj sadlk jflksadj flksjadflksadj flksdaj flksdaj flksdaflksjdflk sjdalkfj skdal fjlksadj flksa fklsjadfklj sadklfj salkdjf lksadj flksjad lfkj sadlkf jslakdjf lksdaj flkasj flkjsa dlfskal flsa jdas lkfjskad fj
  </div>
</div>
<div class="buttons">
  <button onclick="document.getElementById('window').scrollBy(-100,0)">
  <-
  </button>
  <button onclick="document.getElementById('window').scrollBy(100,0)">
  ->
  </button>
</div>

解决方案也在这里：JSFiddle。

- Jakub Rusilko

---

谢谢你提供的解决问题的方法。终于解决了！ - Sven

Answer 2

因此，使用动画属性 += 来从当前位置进行调整。

$("#next").click(function(){
  $('#foo').stop().animate({scrollLeft: "+=100"}, 800);
  return false;
}); 

div {
  width: 200px;
  overflow: auto;
  padding: 1em;
  border: 1px solid black;
}

div p {
  width: 1000px;
  border: 2px dashed #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="foo">
  <p>TEST</p>
</div>

<button id="next">Next</button>

- epascarello

---

感谢您的及时回答，解决得非常完美，而且并不太复杂！我会记住这个方法以备将来遇到类似问题。 - Sven