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

在大多数浏览器上，滚动条将窗口滚动一整页。如果页面上有可滚动的div，单击它可为其提供焦点，滚动条控制该内部div 的分页。

是否可以以编程方式强制空格键滚动特定的内部div而不是窗口？

在div 上调用 focus() 似乎不会将滚动条控制权转移到它。（演示）

这只需要支持 Chrome。

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

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

它可以是任何数字，而不仅仅是 1。

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

<!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（）在带有渐变的div 上 - 因为你想滚动它，而不是它的父级
为了能够完全专注于div，您必须设置它的 tabindex 属性 - 类似于

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

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

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

相关内容

最新更新

热门标签：