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

【问题标题】：Use Arrow Keys to Step Through Anchors on a Horizontal Scrolling Website使用箭头键逐步浏览水平滚动网站上的锚点
【发布时间】：2013-07-31 13:31:11
【问题描述】：

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

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

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

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

谢谢！

【问题讨论】：

【解决方案1】：

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

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

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

被替换为

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

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

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

【讨论】：

谢谢 - 我意识到有一个额外的问题，这使得这特别复杂，因为我想继续允许平滑滚动。所以我实际上需要找到一些 Javascript 来检测浏览器窗口的位置以及它应该滚动到下一个... Eeek！