Problems w/ scrollIntoView - causing whole page to scroll

cmay · Aug 26, 2005

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>
 a a a a a a a a a a a a a a a a a a a a a a a a a a a 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>

 a a a a a a a a a a a a a a a a a a a a a a
</body>
</html>

ASM · Aug 26, 2005

cmay said:
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

cmay · Aug 29, 2005

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?

cmay · Sep 7, 2005

Bump.

Anyone out there with knowledge on this issue?

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Nested Loop Insert Page Break	1	Nov 5, 2021
Help with my responsive home page	2	Dec 14, 2022
Angularjs newbie - second JSON datasource does not display	0	May 18, 2022
Help with code	0	Jun 12, 2022
How can I create a table using the input element?	1	Mar 25, 2022
Script to send email not working	1	Apr 10, 2023
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated	1	Aug 29, 2023

Problems w/ scrollIntoView - causing whole page to scroll

cmay

ASM

cmay

cmay

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads