专注于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() {&nbsp; document.getElementById('body').focus();};body {&nbsp; overflow: hidden;}.page-body {&nbsp; overflow: auto;&nbsp; max-height: 200px;}<div id="header">&nbsp; <!--header html goes here--></div><div id="body" class="page-body" tabIndex="1">&nbsp; <p>lorem ipsum</p>&nbsp; <p>lorem ipsum</p>&nbsp; <p>lorem ipsum</p>&nbsp; <p>lorem ipsum</p>&nbsp; <p>lorem ipsum</p>&nbsp; <p>lorem ipsum</p>&nbsp; <p>lorem ipsum</p>&nbsp; <p>lorem ipsum</p>&nbsp; <p>lorem ipsum</p></div><div id="footer">&nbsp; <!--footer html goes here--></div>

Answer 2

LattyS 提供了有效的代码片段和有效的 js 答案，但是如果您想在不使用 js 的情况下完成此操作，那么您所要做的就是使用tabindex属性和autofocus属性。body {&nbsp; overflow: hidden;}.page-body {&nbsp; overflow: auto;&nbsp; max-height: 200px;}<div id="header">&nbsp; <!--header html goes here-->&nbsp; Header</div><div id="body" class="page-body" tabIndex="1" autofocus>&nbsp; <p>123</p>&nbsp; <p>123 123</p>&nbsp; <p>123 123 123</p>&nbsp; <p>123 123 123 123</p>&nbsp; <p>123 123 123 123 123</p>&nbsp; <p>123 123 123 123</p>&nbsp; <p>123 123 123</p>&nbsp; <p>123 123</p>&nbsp; <p>123</p></div><div id="footer">&nbsp; <!--footer html goes here-->&nbsp; Footer</div>