Question

Heyjo，

问题：自一周以来，我一直在寻找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

水平水平滚动100像素

2 个答案: