无法在Chrome中使用键盘滚动页面

Question

我在一个正在工作的站点中发现了一个非常奇怪的问题，问题是关于使用chrome键盘从上/下滚动页面，这就是我的结构（ JSFiddle演示 ）

在此页面中，我更改的是通过执行以下操作来重置正文滚动overflow:hidden html和body，并启用容器中的滚动。

出现此问题的原因是，当您在chrome中打开网站并且不单击页面中的任何位置时，只需尝试使用键盘的向下箭头滚动即可，但是当您单击页面中的任何位置时，此方法都可以正常工作。 这个问题目前仅在Chrome中显示。

如何解决此问题？ 牢记相同的结构（不启用html / body中的溢出）

请帮忙！！

 html, body { overflow: hidden; height: 100%; margin: 0; padding: 0; } .wrapper { width: 100%; float: left; overflow: auto; height: 100%; } 

 <div class="wrapper"> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> <p>Hello this is test</p> </div> 

Answer 1

您必须向div添加一个tabindex：

<div class="wrapper" tabindex="1">...

然后添加此脚本：

document.getElementsByClassName("wrapper")[0].focus();