I have a table with a list of selectable rows. The table will scroll (due to a div tag) after a certain number of rows are inserted. I created a function which will allow the user to arrow-key up and down the list but I have one problem. Pressing an arrow key causes the scrollbar to also move. Is there a way to make that scrollbar not move except when either the top or bottom of the displayed list is reached (like in a Select listbox with a scrollbar)? Your help will be greatly appreciated.
Below is the code which demonstrates the problem.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
var curSelected = null;
function rowFocus(row) {
tblIcd9.rows[row].style.backgroundColor = 'blue';
tblIcd9.rows[row].style.color = 'white';
if (curSelected != null)
{
tblIcd9.rows[curSelected].style.backgroundColor = '';
tblIcd9.rows[curSelected].style.color = '';
}
curSelected = row;
}
function rowArr() {
var arrKey = event.keyCode;
if ((arrKey == 38) && (curSelected > 0)) {
rowFocus(curSelected-1);
return;
}
if ((arrKey == 40) && (curSelected < (tblIcd9.rows.length-1))) {
rowFocus(curSelected+1);
return;
}
}
</script>
</head>
table/div scrollbar problem
Bookmarks