jQuery-onClick animate ScrollLeft-不工作

Question

我有一个简单的网页，有1个主容器和4个全屏div，我正在尝试使它们水平滚动。例如，我单击div1，然后视口移动到div2，等等。我已经使用scrollTop方法在另一个实例中垂直实现了这一点。

我可以手动将页面滚动到其他div，没有问题，但点击时不起作用。有一个提琴附有一个接近的例子，你必须用箭头键滚动（我还没有解决鼠标滚轮滚动的问题）。

https://jsfiddle.net/58j2dg3a/36/

这是我用来制作向左滚动动画的js代码。

$（document）.ready（function（））{$（“#one”）.点击（function（）{console.log（this.id）；$（'html，body'）.animate({scrollLeft:$（“#two”）.offset（）.left}, 1000);});});

Answer 1

这个向左滚动是在html和body元素上设置的，但应该设置为.容器.

作为一个建议，您可能想研究使用CSS滚动捕捉，它允许您在没有JavaScript的情况下完成这类操作。

Answer 2

正如卢克·钱宁斯建议的那样，我没有使用正确的元素滚动。我刚做完实验，结果很好。我现在告诉它移动到哪里，而不是告诉scrollLeft移动X个像素。我需要这样做才能做出响应，所以每次我触发函数时，我都会得到视口宽度并将其乘以x，这取决于我要显示的div。

Fiddle是最新的最终版本。

https://jsfiddle.net/b5g7dhyv网站/

jQuery的代码

$（document）.ready（function（））{$（'#one'）.on（'click'，function（）{让viewportWidth=$（window）.width（）；$（'#main-wrapper'）.animate（{scrollLeft:viewportWidth}，1000）；})$（'#two'）.on（'click'，function（）{让viewportWidth=$（window）.width（）；$（'#main-wrapper'）.animate（{scrollLeft:viewportWidth*2}，1000）；})$（'#three'）.on（'click'，function（）{让viewportWidth=$（window）.width（）；$（'#main-wrapper'）.animate（{scrollLeft:viewportWidth*3}，1000）；})$（'#four'）.on（'click'，function（）{$（'#main-wrapper'）.animate（{scrollLeft:0}，1000）；})});