水平滚动 100px

Question

嘿乔，

问题：一周以来，我一直在寻找 javascript 或 jQuery 代码，以便在我的网站上运行已实现的滚动按钮。我失败的那一刻是按钮应该多次工作：他的任务不是滚动到专用元素，它应该向左滚动，例如 100px。此外，滚动应该在适当的部分顺利进行（换句话说，动画）。

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

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

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

Answer 2

所以使用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>