以编程方式移动空格键滚动控件

Question

在大多数浏览器上，滚动条会滚动 window 整页。如果页面上有一个可滚动的 div，单击它会为其提供焦点，并且滚动条控制该内部 div.

的分页

是否可以通过编程强制空格键滚动特定的内部 div 而不是 window？

在 div 上调用 focus() 似乎不会将滚动条控制转移给它。 (demo)

这个只需要支持Chrome.

Answer 1

如果你给 div 一个 tabindex 属性，它应该可以工作..

<div id="container" tabindex="1"></div>

可以是任意数字，不只是1。

Answer 2

你可以试试这个（对我有用）：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="container">
  <div id="content" tabindex="0">
  </div>
</div>
<script>
document.getElementById("content").focus();
</script>
<style>
#container {
  width: 400px;
  height: 300px;
  border: 1px solid black;
  overflow: scroll;
}

#content {
  background: linear-gradient(to top, blue, red); 
  height: 1000px;
  width: 100%;
}
</style>
</body>
</html>

我的代码在以下两个方面与您的不同：

focus() on div with gradient - 因为你想滚动它，而不是它的父
为了能够完全专注于 div，您必须设置它的 tabindex 属性 - 类似于“-10019000”“-5”“-1”“-1”“ 0" "1" "5" "10019000".

您可以在此处阅读有关 tabindex 的更多信息，只需 1-5 分钟：

https://developer.mozilla.org/ru/docs/Web/HTML/Global_attributes/tabindex

http://www.w3schools.com/tags/att_global_tabindex.asp

以编程方式移动空格键滚动控件

Programmatically moving spacebar scrolling control

javascript

scroll

google-chrome

scrollbar