I am trying to use scrollIntoView to programatically scroll an area on
one of my pages.
It wors just like you would expect it to when the page itself doesn't
have any scrolling (the page is smaller than the browser window).
However, as soon as you introduce the same code on a page that has a
vertical scrollbar, the scrollIntoView causes not only the scroll area
to move, but also the entire form.
Is this by design, or is there a workaround?
To see what I am talking about just run this code. It will cause the
table to "jump" to the top of the page along with causing the selected
row to jump to the top of the scroll area.
<html>
<script>
function scrollTable()
{
var rowVal = txtRowNo.value;
var strId = "tr" + rowVal;
var objTR = document.getEle mentById(strId) ;
if(objTR)
objTR.scrollInt oView(true);
else
{
objTR = document.getEle mentById("tr1") ;
objTR.scrollInt oView(true);
}
}
</script>
<BODY>
<BR><BR>a<BR><B R>a<BR><BR>a<BR ><BR>a<BR><BR>a <BR><BR>a<BR><B R>a<BR><BR>a<BR ><BR>a<BR><BR>a <BR><BR>a<BR><B R>a<BR><BR>a<BR ><BR>a<BR><BR>a <BR><BR>a<BR><B R>a<BR><BR>a<BR ><BR>a<BR><BR>a <BR><BR>a<BR><B R>a<BR><BR>a<BR ><BR>a<BR><BR>a <BR><BR>a<BR><B R>a<BR><BR>a
enter a number:<input type="text" id="txtRowNo">
<input type=button onclick=scrollT able() value="Click me">
<div style="height:1 00px;overflow:a uto;border:1px solid black">
<table width="100%" border="1">
<tr id="tr1"><td>1 </td><td>Row 1</td></tr>
<tr id="tr2"><td>2 </td><td>Row 2</td></tr>
<tr id="tr3"><td>3 </td><td>Row 3</td></tr>
<tr id="tr4"><td>4 </td><td>Row 4</td></tr>
<tr id="tr5"><td>5 </td><td>Row 5</td></tr>
<tr id="tr6"><td>6 </td><td>Row 6</td></tr>
<tr id="tr7"><td>7 </td><td>Row 7</td></tr>
<tr id="tr8"><td>8 </td><td>Row 8</td></tr>
<tr id="tr9"><td>9 </td><td>Row 9</td></tr>
<tr id="tr10"><td>1 0</td><td>Row 10</td></tr>
<tr id="tr11"><td>1 1</td><td>Row 11</td></tr>
<tr id="tr12"><td>1 2</td><td>Row 12</td></tr>
<tr id="tr13"><td>1 3</td><td>Row 13</td></tr>
<tr id="tr14"><td>1 4</td><td>Row 14</td></tr>
<tr id="tr15"><td>1 5</td><td>Row 15</td></tr>
<tr id="tr16"><td>1 6</td><td>Row 16</td></tr>
</table>
</div>
<BR><BR>a<BR><B R>a<BR><BR>a<BR ><BR>a<BR><BR>a <BR><BR>a<BR><B R>a<BR><BR>a<BR ><BR>a<BR><BR>a <BR><BR>a<BR><B R>a<BR><BR>a<BR ><BR>a<BR><BR>a <BR><BR>a<BR><B R>a<BR><BR>a<BR ><BR>a<BR><BR>a <BR><BR>a<BR><B R>a
</body>
</html>
