使 div 无需单击即可通过键盘滚动答案

【问题标题】：Enable div to scroll by keyboard without clicking使 div 无需单击即可通过键盘滚动
【发布时间】：2012-09-13 16:34:50
【问题描述】：

我有 div 元素，我在其中加载文本，通常是长文本，所以 div 有滚动条。当光标在它上面时，我可以用鼠标在这个 div 中滚动，但我不能上下滚动页面，除非我先在 div 内单击。那么有没有办法避免这种点击，在加载文本时从代码中做到这一点？

【问题讨论】：

您可以添加示例代码，例如 jsfiddle 来说明吗？我想帮忙，但我不清楚你的确切问题。
是的，我可以，希望对您有所帮助jsfiddle.net/BQQ8C/1

标签： scroll

【解决方案1】：

这里的答案对我有用：

Set keyboard focus to a <div>

基本上在 div 中添加一个tabindex：

<div id="mydiv" tabindex="-1">

然后使用以下方式以编程方式设置焦点： document.getElementById("mydiv").focus();

来自原帖：

tabindex 值可以允许一些有趣的行为。

如果给定值“-1”，则元素不能被选项卡，但焦点可以以编程方式赋予元素（使用 element.focus()）。

如果给定值 0，则元素可以通过键盘和落入文档的标签流中。

大于 0 的值创建一个优先级，其中 1 是最重要的。

【讨论】：

您能否在此处引用的答案中包含相关详细信息？

【解决方案2】：

正如您所描述的，就是这样。我将输入附加到内容 div，然后对其进行 focus()，而不是尝试聚焦 div。因此，在按下加载文本后，您可以立即按下 pg up/dn 滚动 div。

HERE IT IS

 $("div").append('<input type="text" id="focusDiv">');
    /*
 Here I need to have some code which gives "focus to the div, so if I press the load text and then immediately PageDown key, sthedvis scrolls down.

 $("button").on("click", function (e) {
    e.preventDefault();
    $("div").html("Very long text...");
    $("div").append('<input type="text" id="focusDiv">');
    $('#focusDiv').focus();
});

【讨论】：

我试图找到一些更有效的解决方案，但这还不错，效果很好，谢谢！