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

Question

我在使用定义的溢出时遇到了一个特殊问题。

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

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

在我单击文档之前，向下按钮不会向下滚动页面。不过，用鼠标滚动仍然可以正常工作。当我不定义溢出时，不会出现此问题，这对于我现在正在做的事情来说很好，但我仍然想知道为什么会这样。

fiddle :http://jsfiddle.net/Shiazure/K552t/

使用 Windows 7 SP1，测试的浏览器是 Chrome 和 FF(均为最新版本)

Answer 1

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

现在您无法使用向下箭头滚动，因为加载页面时正文未聚焦。

解决方案:确保主体具有焦点。在 fiddle 中，这是通过添加一点 Javascript 来完成的

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

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

您将无法看到 fiddle 本身的差异，因为输出位于单独的框架中，但这里是它的 "show"页面，在框架之外，按照广告的方式工作。与原来的比较 "show"页。