专注于html的滚动部分

Question

我有一个由三个 div 部分组成的页面。<div id="header"><!--header html goes here--></div><div id="body" class="page-body"><!--main html goes here--></div><div id="footer"><!--footer html goes here--></div>我的CSS是body {    overflow: hidden;}.page-body{    overflow: auto;}问题是如果用户按下PgDn或down arrow键然后页面不会向下滚动。为了让页面通过键盘向下滚动，用户必须首先单击page-body div部分，然后按键才能工作。我曾尝试autofocus在页面主体 div 上使用标签或document.getElementById('page-body').focus()在加载时写入，但似乎没有任何效果。如何在页面加载后立即使键盘工作而无需单击该部分？我更喜欢没有 javascript 的解决方案，因为我的页面并不真正需要它，但如果我必须，我也可以使用 javascript 解决方案。

Answer 1

你快到了，只需在你的 div 上添加一个正的tabindex属性。但是您应该知道，就可访问性而言，这不是一个很好的做法。

window.onload = function() {

  document.getElementById('body').focus();

};

body {

  overflow: hidden;

}

.page-body {

  overflow: auto;

  max-height: 200px;

}

<div id="header">

  <!--header html goes here-->

</div>

<div id="body" class="page-body" tabIndex="1">

  <p>lorem ipsum</p>

  <p>lorem ipsum</p>

  <p>lorem ipsum</p>

  <p>lorem ipsum</p>

  <p>lorem ipsum</p>

  <p>lorem ipsum</p>

  <p>lorem ipsum</p>

  <p>lorem ipsum</p>

  <p>lorem ipsum</p>

</div>

<div id="footer">

  <!--footer html goes here-->

</div>

Answer 2

LattyS 提供了有效的代码片段和有效的 js 答案，但是如果您想在不使用 js 的情况下完成此操作，那么您所要做的就是使用tabindex属性和autofocus属性。

body {

  overflow: hidden;

}

.page-body {

  overflow: auto;

  max-height: 200px;

}

<div id="header">

  <!--header html goes here-->

  Header

</div>

<div id="body" class="page-body" tabIndex="1" autofocus>

  <p>123</p>

  <p>123 123</p>

  <p>123 123 123</p>

  <p>123 123 123 123</p>

  <p>123 123 123 123 123</p>

  <p>123 123 123 123</p>

  <p>123 123 123</p>

  <p>123 123</p>

  <p>123</p>

</div>

<div id="footer">

  <!--footer html goes here-->

  Footer

</div>