使用箭头键单步执行水平滚动网站上的锚点

Question

我有一个包含一组图像的页面，每个图像都有一个包含在white-space:nowrap div中的唯一ID ("Main-1“、"Main-2”等)，所以页面水平滚动。

我想要一种使用左右箭头键在这些图像中循环的方式(最好使用滚动动画，我目前正在使用当前现有的直接导航链接中的scrollTo() )。

我为垂直滚动的网站找到了这一点，但似乎找不到与之对应的水平滚动页面(而且我的JS不是很好，所以我尝试将垂直代码转换为水平滚动页面的尝试失败了！)。

这个JFiddle做的正是我想要的，但是对于一个垂直滚动的站点：http://jsfiddle.net/aVvQF/4/ .....有没有人能帮我把这个转换成水平滚动？

谢谢！

Answer 1

因为你已经有了可以工作的代码，所以很容易适应。

查看水平工作而不是垂直工作的this JSFiddle

$('html, body').clearQueue().animate({scrollTop: $targetElement.offset().top }, 1000);

被替换为

$('html, body, #placeholder').clearQueue().animate({scrollLeft: $targetElement.offset().left }, 1000);

如您所见，我还调整了占位符div并添加了id选择器。

请注意，这只适用于上箭头键和下箭头键，我不想做您所有的工作:)