专注于要在页面加载时滚动的元素

Question

我正在尝试通过javascript聚焦/激活容器，以便我可以使用向上和向下箭头键滚动它。目前，在我点击该容器之前，这是不可能的。

Here is the fiddle

HTML

<div class="main">
    <div class="child"></div>
</div>

CSS

.main {
    width: 300px;
    height: 400px;
    background-color: green;
    overflow: auto;
}
.child {
    height: 800px;
    width: 30px;
    background-color: red;
}

我尝试使用javascript的Element.focus()方法，但该方法无效。

Answer 1

您需要设置tabindex属性才能使DIV元素具有焦点，例如：

<div class="main" tabindex="-1">

然后，为了样式化，您可以设置outline CSS属性：

.main {
    outline: 0;
    ...
}

-DEMO-