How to change the keyboard scroll step on HTML page

Question

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?

I'm pretty sure this is controlled by your OS. If you check your mouse settings, there's ways you can make it change how many lines it scrolls. The best way to approach this would probably be to bind to key events, prevent them from scrolling, and then manually scroll fixed amounts. — Overcode, Jul 08 '15 at 16:07
There exists a proposal for [CSS Scroll Snap Points](http://dev.w3.org/csswg/css-snappoints/); see also: http://generatedcontent.org/post/66817675443/setting-native-like-scrolling-offsets-in-css-with — feeela, Jul 08 '15 at 16:12

score 1 · Accepted Answer · edited May 23 '17 at 12:21

1

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?

edited May 23 '17 at 12:21

Community

1
1

answered Jul 08 '15 at 18:09

JDrost1818

964
5
21

Thanks, that actually was my very first idea but I'm still hoping there is a way to do it by some simple configuration. – conceptacid Jul 09 '15 at 07:04
You answer is correct but the reason I don't want to do this is because I'm doing an infinite scroll with lazy loading. The list of items is updated every time I scroll to the top or bottom. Currently triggering the lazy load is very easy because I only need to subscribe to onscroll. If I have to scroll manually the entire logic gets more complicated. – conceptacid Jul 09 '15 at 07:25

How to change the keyboard scroll step on HTML page

1 Answers1