时间戳

首页 > 解决方案 > 水平滚动 100px

javascript - 水平滚动 100px

问题描述

嘿乔，

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

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

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

标签： javascriptjqueryhtmlhorizontal-scrollingsmooth-scrolling

解决方案

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

推荐阅读