水平滚动100px

Question

谨慎，

问题：我正在寻找一个javascript或jQuery代码，因为一周后我的网站上实现了一个滚动按钮。我失败的那一刻是按钮应该多次工作：他的任务不是滚动到一个专用元素，它应该向左滚动，例如，100px。此外，滚动应该在适当的部分中平滑地进行（换句话说，动画）。

我尝试了什么：直到现在我试图用$('#idofsection').animate({scrollLeft: 100}, 800)完成这项任务，但显然它没有用。问题是，人们不能多次使用它，它只是滚动到我的部分中的位置。之后我使用了javascript的scrollBy(100, 0)或scrollLeft += 100px，但遗憾的是没有让它顺利滚动。

我希望有人可以帮助我，因为我花了很多时间在这个问题上而没有找到解决方案。非常感谢，斯文

Answer 1

因此，使用animation properties +=从当前位置调整它。

$("#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>

Answer 2

您可以像尝试一样使用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