469,599 Members | 2,794 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,599 developers. It's quick & easy.

Problems w/ scrollIntoView - causing whole page to scroll

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.getElementById(strId);
if(objTR)
objTR.scrollIntoView(true);
else
{
objTR = document.getElementById("tr1");
objTR.scrollIntoView(true);
}
}
</script>

<BODY>
<BR><BR>a<BR><BR>a<BR><BR>a<BR><BR>a<BR><BR>a<BR>< BR>a<BR><BR>a<BR><BR>a<BR><BR>a<BR><BR>a<BR><BR>a< BR><BR>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><BR>a<B R><BR>a<BR><BR>a<BR><BR>a<BR><BR>a<BR><BR>a<BR><BR >a
enter a number:<input type="text" id="txtRowNo">
<input type=button onclick=scrollTable() value="Click me">
<div style="height:100px;overflow:auto;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>10</td><td>Row 10</td></tr>
<tr id="tr11"><td>11</td><td>Row 11</td></tr>
<tr id="tr12"><td>12</td><td>Row 12</td></tr>
<tr id="tr13"><td>13</td><td>Row 13</td></tr>
<tr id="tr14"><td>14</td><td>Row 14</td></tr>
<tr id="tr15"><td>15</td><td>Row 15</td></tr>
<tr id="tr16"><td>16</td><td>Row 16</td></tr>
</table>
</div>

<BR><BR>a<BR><BR>a<BR><BR>a<BR><BR>a<BR><BR>a<BR>< BR>a<BR><BR>a<BR><BR>a<BR><BR>a<BR><BR>a<BR><BR>a< BR><BR>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><BR>a
</body>
</html>

Aug 26 '05 #1
3 6516
ASM
cmay wrote:
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?


try :

function scrollTable(yesNo)
{
var rowVal = document.getElementById('txtRowNo').value;
var strId = "tr" + rowVal;
var objTR = document.getElementById(strId);
if(objTR)
objTR.scrollIntoView(yesNo);
else {
objTR = document.getElementById("tr1");
objTR.scrollIntoView(yesNo);
}
}

and your button ->
<input type=button onclick=scrollTable(true) value="All Scroll To">
<input type=button onclick=scrollTable(false) value="Scroll To Row">

As you'll see a choice is possible

--
Stephane Moriaux et son [moins] vieux Mac
Aug 26 '05 #2
It looks like all you did was make change the parameter passed into the
scrollIntoView method.

When this is true it makes the scrollable area jump to the top of the
page, when this is false it makes it jump to the bottom of the page.

If that is the choice you are talking about it doesn't really help. I
don't want the page to jump, I just want the scrollable div to move,
not the entire page.

Am I missing something?

Aug 29 '05 #3
Bump.

Anyone out there with knowledge on this issue?

Sep 7 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Andres Mas Torrecillas | last post: by
1 post views Thread by Steve Murphy | last post: by
reply views Thread by Larry Brown | last post: by
4 posts views Thread by xevi.matavacas | last post: by
1 post views Thread by Alex Calder | last post: by
4 posts views Thread by guiromero | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.