水平平滑滚动 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

水平平滑滚动 100px

Scroll smoothly by 100px horizontally

javascript

jquery

html

horizontal-scrolling

smooth-scrolling