沿水平方向平滑滚动100像素 [英] Scroll smoothly by 100px horizontally

问题描述

Heyjo，

问题:自一周以来，我一直在寻找javascript或jQuery代码，以使网站上的已实现滚动按钮正常工作.我失败的那一刻是按钮应该多次工作:他的任务不是滚动到专用元素，而是向左滚动，例如100px.此外，滚动应该在适当的区域中平稳进行(换句话说，是动画).

problem: I am looking for a javascript or jQuery code since a week to get an implemented scrollbutton on my website working. The moment I fail is when the button should work multiple times: his task is not so scroll to a dedicated element, it should scroll left by, for instance, 100px. Furthermore the scrolling is supposed to happen smoothly (in other words, animated) in a proper section.

我尝试过的事情:直到现在，我一直尝试使用$('#idofsection').animate({scrollLeft: 100}, 800)完成此任务，但显然没有用.问题是，不能多次使用它，它只是滚动到我的部分中的某个位置.之后，我使用了javascript的scrollBy(100, 0)或scrollLeft += 100px，但是不幸的是，它并没有流畅地滚动.

what I tried: til now I tried to fulfill this task with $('#idofsection').animate({scrollLeft: 100}, 800) but obviously it didn't work. The Problem was, one couldn't use it multiple times, it just scrolled to a position in my section. Afterwards I used javascript's scrollBy(100, 0) or scrollLeft += 100px, but unfortunately didn't got it to scroll smoothly.

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

I hope someone can help me because I spent so much time on this issue without finding a solution. Thanks a lot, Sven

推荐答案

因此请使用动画属性 +=从当前位置进行调整.

So use the animation properties += to adjust it from current position.

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

这篇关于沿水平方向平滑滚动100像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！