使用箭头键滚动 div答案

【问题标题】：Scroll div with arrow keys使用箭头键滚动 div
【发布时间】：2012-02-06 23:58:33
【问题描述】：

这类似于SO: how to move a div with arrow keys，所以也许一个明确且明智的“不”就足以作为答案：

我可以将溢出的 div 设置为“默认滚动目标”，它对向上/向下/向下/向下/空格做出反应与溢出文档的方式相同（即向下滚动内容） ?页面本身没有滚动条（下面的简单示例）。特别是，不显式跟踪关键事件（既不直接也不被 JS 库隐藏）能否实现这一点？

<html>
 <body>
  <div id="contentcontainer" style="height:200px;width:200px;overflow:scroll">
   <div id="innercontent" style="height:2000px;">foo</div>
  </div>
 </body>
</html>

编辑：当然，在我点击 div 后，上述方法有效。基本上，我想避免这样做......

【问题讨论】：

你有没有想过简单地 styling the scrollbars div 并强制对其进行某种关注
是的，但您仍然需要关注 div 元素。为什么你不只是尝试，我去了一个网站，只是点击了溢出的 div，并使用了键，没问题......但是我认为你将无法完成“自动对焦”......7跨度>
我不关心样式。 “强制执行某种焦点”可能是我正在寻找的... ;) 那将如何工作？
我不知道滚动条的样式将如何帮助解决这个问题...（您不应该设置滚动条的样式，它是不受支持的 microsoft css 扩展）
WebKit 也支持样式滚动条，这是一个有用的功能。我看不出有什么理由不给它们设置样式。

标签： javascript html css

【解决方案1】：

为了使 html 元素具有焦点，它必须可以通过 Tab 键访问。这意味着您可以在链接或输入上调用.focus()。此外，body 元素始终是可聚焦的。

您需要使用 Tab 键使您的 div 可访问。您可以通过在其上设置tabindex 属性来完成此操作。如果您实际上不希望人们能够使用 Tab 键进入该 div，则可以将 tabindex 设置为 -1，这将阻止人们实际使用 Tab 键切换到该 div，否则会将元素设置为 Tab 键和焦点。

来源：http://help.dottoro.com/ljpkdpxb.php

【讨论】：

在确保 div 有 tabindex 属性后，然后调用 div.focus()，它工作了！谢谢！

【解决方案2】：

浏览器通常内置有这种行为，

为了使用箭头键向下滚动您的 div，您必须在焦点内有一个元素。

查找http://api.jquery.com/focus/

【讨论】：

即使在 div 内的表单元素上执行 .focus() 之后，Google Chrome 也不会将该 div 识别为箭头键滚动击键的目标。