javascript - 无法在 chrome 中使用键盘滚动页面

Question

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

在此页面中，我所做的更改是，通过对 html 和 body 执行 overflow:hidden 并在容器中启用滚动来重置 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();