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();

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

1 个答案: