当为html，body定义溢出时，键盘向下按钮不起作用

Question

使用已定义的overflow时，我遇到了一个特殊的问题。

当我使用以下任何一项时：

html, body {
    overflow-x: hidden;
    overflow-y: auto;
    // OR
    overflow-x: hidden;
    overflow-y: scroll;
    // OR
    overflow: auto;
}

向下按钮不会向下滚动页面，直到我点击文档。但是，使用鼠标滚动仍然可以正常工作。当我没有定义overflow时，这个问题不会发生，这对我现在所做的事情来说很好，但是我仍然想知道为什么会这样。

小提琴：http://jsfiddle.net/Shiazure/K552t/

使用Windows 7 SP1，测试的浏览器是Chrome和FF（两者都是最近的）

Answer 1

如果没有overflow属性，则没有任何内容可以滚动。这就解释了是否有溢出之间的区别。 （请注意，未指定overflow表示默认为visible，而不是auto。请参阅W3C。

现在您无法使用向下箭头滚动，因为加载页面时主体没有聚焦。

解决方案：确保身体具有焦点。在小提琴中，这是通过添加一点Javascript

来完成的

document.body.tabIndex = '0';
document.body.focus();

请参阅updated fiddle 第二行将焦点设置在身体上。 Chrome中需要第一行，以确保身体实际上是可聚焦的。 Firefox只需要第二行。

你将无法看到小提琴本身的区别，因为输出是在一个单独的框架中，但这里是它的"show"页面，在框架之外，按照宣传的方式工作。与您原来的"show"页面进行比较。