CODEWITHSUNDEEP
htmlcss
conceptacid
conceptacid

Reputation: 338

How to change the keyboard scroll step on HTML page

I'm implementing a web-page for viewing log entries. The code looks like this (with random data):

<html>

<body>
  <div style="width: 100%; height: 150px; overflow-y: scroll; overflow-x: hidden; white-space: nowrap;">
    <ul>
      <li>1: Random: 199737: RANDOM: thou  cover bare unless mind office library</li>
      <li>2: Random: 199738: RANDOM: quietly syllable fewer which selection dangerous</li>
      <li>3: Random: 199739: RANDOM: hung  spend wonder care (199739) leg card first</li>
      <li>4: Random: 199740: RANDOM: available circus laid (199740) surrounded pack</li>
      <li>5: Random: 199741: RANDOM: finally green be around (199741) visit headed</li>
      <li>6: Random: 199742: RANDOM: studied until bare  parts busy string modern</li>
      <li>7: Random: 199743: RANDOM: empty garage sitting (199743) fish famous still</li>
      <li>8: Random: 199744: RANDOM: cat kitchen service diameter friendly lying</li>
      <li>9: Random: 199745: RANDOM: even shoulder composition rubber carbon</li>
      <li>10: Random: 199746: RANDOM: about indicate rhythm were beneath expression bit</li>
      <li>11: Random: 199747: RANDOM: future independent clock lying reach slipped</li>
      <li>12: Random: 199748: RANDOM: clothing number scared solar radio forty</li>
      <li>13: Random: 199749: RANDOM: break volume  folks teach</li>
    </ul>
  </div>
</body>

</html>

Now, if I clicking on the list and press DOWN with each key press the list scrolls by more than one line. In Chrome I see the 1-st line, then 3-rd, then 6-th, etc...

My expectations were that UP and DOWN keys should scroll exactly 1 line, while PAGE UP and PAGE DOWN should scroll exactly the number of lines fitting in the <div> (150px in the current example). However this is not the case. Instead, UP,DOWN keys scroll 2 lines and PAGE UP,PAGE DOWN scroll about 75% of the visible area.

My questions are why is that so and is there a way to do it in the expected way?

Upvotes: 0

Views: 1467

Answers (1)

JDrost1818
JDrost1818

Reputation: 1126

You could add a document listener that changes the scroll value using javascript

var pageUp   = 33;
var pageDown = 34;
var keyUp    = 38;
var keyDown  = 40;

$(document).keydown(function(e) {
      var key = e.which;
      //console.log(key);
      if(key==keyDown) { 
          // scroll down height of one entry
          e.preventDefault();
      } else if (key==pageDown) {
          // scroll different
          e.preventDefault();
      .
      .
});

Source: How do I prevent scrolling with arrow keys but NOT the mouse?

Upvotes: 1

Related Questions