箭头键滚动DIV

问题描述：

这类似于SO: how to move a div with arrow keys，所以也许一个明确告知“不”足以作为一个答案：箭头键滚动DIV

我可以作出溢出的div反应“默认滚动目标”向上箭头/ down/page-down/space 与溢出文档（即向下滚动内容）的方式相同？该页面本身没有滚动条（下面的简单例子）。特别是，这可以完成而不明确跟踪关键事件（既不直接也不由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（http://websitetips.com/articles/css/scrollbars/）和实施某种形式的重点就可以了 – 2012-01-10 15:19:36

肯定的，但你仍然需要关注div元素。为什么你不试试，我去了一个网站，只是点击进入溢出div，并使用密钥，没有问题......但“自动对焦”，你将无法完成我认为... 7 – Luke 2012-01-10 15:21:41

我不关心造型。 “强化某种焦点”可能是我正在寻找的东西......;）这将如何工作？ – dcn 2012-01-10 15:22:07

答

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

为了使用箭头键下您的DIV滚动，内集中你必须有一个元素。

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

即使在div中的表单元素上执行'.focus（）'，谷歌浏览器也不会将div识别为箭头键滚动键击的目标。 – 2012-06-05 13:06:25

答

为了使html元素要成为焦点，它必须是可到达的使用Tab键。这意味着您可以通过链接或输入呼叫.focus()。此外，body元素始终是可以聚焦的。

你需要让你的div与Tab键可达。您可以通过设置其上的tabindex属性来完成此操作。如果您实际上不希望人们能够标签到该div，您可以将tabindex设置为-1，这会阻止人们实际选中它，但会将元素设置为Tab键和焦点。

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

确保div有一个tabindex属性，然后调用div.focus（），它工作！谢谢！ – Josh 2016-11-11 17:44:01

箭头键滚动DIV

相关推荐