Удобство использования клавиши Page Down с фиксированной строкой в ​​верхней части страницы - PullRequest
Новая
       28

Удобство использования клавиши Page Down с фиксированной строкой в ​​верхней части страницы

6 голосов
/ 18 июня 2011

Если у вас есть абсолютно позиционированная (position: fixed) панель вверху страницы, как это делают многие веб-сайты, это нарушает поведение кнопки Page Down (а также Page Up). Вместо того, чтобы Page Down оставляла вам строку текста или около того в верхней части экрана, которая ранее находилась внизу экрана, чтобы облегчить дальнейшее чтение, есть немного обрезки, которая очень раздражает. Вот надуманный пример этого. Есть ли способ обойти эту проблему (кроме того, чтобы избегать фиксированных полос в верхней части страниц)?

Исходный код вышеприведенного связанного примера повторяется ниже для потомков: 

<!doctype html>
<html lang="en">
<head>
<style type="text/css">
#bar {
  background: #f00;
  height: 200px;
  position: fixed;
  top: 0;
  width: 100%;
}

p {
  margin-top: 250px;
}
</style>
</head>
<body>

<div id="bar">IMPORTANT STUFF GOES HERE</div>

<p>When you press Page Down (and then Page Up the other way), some of the list items are cut off below the red bar.</p>

<ol><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li></ol>

</body>
</html>

Я нашел кто-то еще уже задавал этот вопрос , но, похоже, единственный ответ, который он получил, был от кого-то, кто неправильно понял проблему. Надеюсь, мой вопрос, включая пример, понятнее, и кто-то может мне помочь.

1 Ответ

1 голос
/ 18 июня 2011

Вы должны проверить наличие клавиши Page Down / Up onkeydown (или onkeyup), которая не очень хороша, если ваша страница требует, чтобы пользователи печатали (может быть много накладных расходов).Тем не менее, вы можете попробовать следующее.Я не так много тестировал, поэтому не знаю, насколько он надежен.Ключ заключается в том, чтобы отслеживать положение прокрутки и вносить коррективы на основе offsetHeight div "bar".Вот код: 

<!doctype html>
<html>
<title></title>
<head>
<style type="text/css">
html, body {
  height:100%;
}
body {
  margin:0;
  padding:0;
}
#bar {
  background: #f00;
  height: 200px;
  position: fixed;
  top: 0;
  width: 100%;
}

p {
  margin-top: 250px;
}
li {
  margin:2em 0;
}
#divScroll {
  overflow:auto;
  height:100%;
  width:100%;
}
</style>

<script language="javascript">
function adjustScroll(event) {
  var ds = document.getElementById('divScroll');
  var b = document.getElementById('bar')
  var e = event || window.event;
  var key = e.which || e.keyCode;
  if(key === 33) { // Page up
    var remainingSpace = ds.scrollHeight - ds.scrollTop;
    setTimeout(function() {
      ds.scrollTop = (remainingSpace >= ds.scrollHeight - b.offsetHeight) ? 0 : (ds.scrollTop + b.offsetHeight);
    }, 10);
  }
  if(key === 34) { // Page down
    var remainingSpace = ds.scrollHeight - ds.scrollTop - ds.offsetHeight;
    setTimeout(function() {
      ds.scrollTop = (remainingSpace <= b.offsetHeight) ? ds.scrollHeight : (ds.scrollTop - b.offsetHeight);
    }, 10);
  }
}

document.onkeydown = adjustScroll;
</script>
</head>

<body>

<div id="bar">IMPORTANT STUFF GOES HERE</div>

<div id="divScroll">
  <p>When you press Page Down (and then Page Up the other way), some of the list items are cut off below the red bar.</p>
  <ol>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
  </ol>
</div>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...