在水平滚动网站上使用箭头键来逐步执行锚点

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选择器。

请注意，这仅适用于向上和向下箭头键，我不想完成所有工作：）