Сосредоточьтесь на разделе прокрутки 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

Вы почти у цели, просто добавьте положительный атрибут tabindex в свой div. Но вы должны знать, что с точки зрения доступности это не очень хорошая практика.

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 с автофокус атрибут.

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>