无法使用 chrome 中的键盘滚动页面

Question

我在我一直在处理的一个站点中发现了一个非常奇怪的问题，问题是关于使用 chrome 中的键盘从上/下滚动页面，这是我的结构 (JSFiddle demo)

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

当您在 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();