I have a div that contains a table that has many rows in it. The scrollbar displays correctly and works correctly when using the mouse. However, in an effort to make it keyboard driven I have made the div have focus and then being able to use the arrow keys (via a onKeyPress event I am able to move up and down the div.

This works except for a little quirk... When the div gains focus and I press the down arrow key, the scrollbar also moves down (effectively hiding the row I'm now currently focused on). So my question is, is there any way to avoid this from happening?

I was looking at the following mands: doScroll(), or scrollTo(), or scroll()

Would any of those work or is there something else I could do to correct the behavior of the scroll bar?

I have a div that contains a table that has many rows in it. The scrollbar displays correctly and works correctly when using the mouse. However, in an effort to make it keyboard driven I have made the div have focus and then being able to use the arrow keys (via a onKeyPress event I am able to move up and down the div.

This works except for a little quirk... When the div gains focus and I press the down arrow key, the scrollbar also moves down (effectively hiding the row I'm now currently focused on). So my question is, is there any way to avoid this from happening?

I was looking at the following mands: doScroll(), or scrollTo(), or scroll()

Would any of those work or is there something else I could do to correct the behavior of the scroll bar?

• javascript

• Take a look at this: flowplayer/tools/demos/scrollable/vertical.html – Diodeus - James MacFarlane Commented Aug 19, 2011 at 16:39

2 Answers 2

Maybe you can do a event.preventDefault() on the arrow keys.

Setting an html attribute of tabindex to the div and max-height + overflow css attributes will allow the div to be tabbable and scrollable with the keyboard. Not saying it's better than the Js solution- just providing an alternate solution without the need for Js.

Run the snippet to see the example. Because of the way stack overflow is laid out, after clicking run, you will need to click anywhere inside the code output box and then click tab (then use the arrows to scroll). Note: this is not because of my code, it's because of the way stack overflow laid out their page.

.wrapper {
  max-height: 50px;
  overflow: auto;
}

<div tabindex="0" class="wrapper">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
  </ul>
</div>