javascript - 使用箭头键逐步浏览水平滚动网站上的锚点

Question

我有一个包含一组图像的页面，每个图像都有一个包含在 a 中的唯一 ID（“Main-1”、“Main-2”等）white-space:nowrap div，因此页面水平滚动。

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

我已经为垂直滚动的网站找到了这个，但似乎找不到水平的等价物（而且我的 JS 不是很好，所以我尝试将垂直代码转换为水平滚动页面的尝试失败了！）。

这个 JFiddle 完全符合我的要求，但对于垂直滚动站点：http: //jsfiddle.net/aVvQF/4/ ..... 谁能帮我将其转换为与水平滚动一起使用？

谢谢 ！

Answer 1

由于您拥有已经可以使用的代码，因此很容易适应。

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

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

被替换为

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

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

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