Panel's Vertical Scrollbar

Hi everyone!!

I'm having 2 problems with the vertical scrollbar of a panel.. I would appreciate it a lot if you could help me.

I have a web page with an IFrame with an aspx page. This IFrame contains a Panel and the panel contains a datagrid. I recently managed to move along the datagrid's lines with the UP and DOWN arrows, changing background color of the register selected by navigation.

These are my 2 problems:

1. From the aspx page, when I move inside the datagrid with the arrows, it also moves the vertical scrollbar, which is ok except for one issue: scrollbar moves a LOT more than the navigation in the datagrid. I mean: if I press the key 2 times, the scrollbar will probably move to the end of the panel showing the bottom of the datagrid, and the selected item is just in line two, that means I can't see it because the scrollbar moved too much to the bottom.

2. From the web page containing the IFrame. I managed to navigate inside the grid with the UP and DOWN keys but I do that in javascript managing the datagrid object. So that doesn't make the vertical scrollbar move. Any ideas?

I guess the general question is: Is there a way to manage the movement of the scrollbar? deciding when and how much you want it to move?? Or at least any ideas that would help me?

Thanks a lot! I hope I explained my problems well enough for you to understand. I would really appreciate a fast response!

I noticed my post has been viewed more than 90 times, so I assume there's people looking for this or something similar.

Anyway, I GOT IT!!!! I'll post it here hoping it will help someone

You have to enable at least the vertical scrollbar of the panel. Here's how you can handle how much you want the scrollbar to move:

var panel1 = document.getElementById('PanelName');
if (panel1 !== null)
{
XCounter += 15;
panel1.scrollTop = XCounter;
}

Where XCounter is a variable you have to use to make the scrollbar move. This variable is an integer that tells the scrollbar which position it has to move to (in pixels).
So, with the down key you add and with the up key you substract, you just put this code in a function and set a condition depending on which action is being performed. I add/substract 15 pixels everytime I move but you can set the number to whatever you want.

If you want to go to the top you do: panel1.scrollTop = 0;

If you want to go to the bottom you do: panel1.scrollTop = panel1.scrollHeight;

I HOPE THIS IS UNDERSTANDABLE AND HELPFUL

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Lor18y ago
Accepted answer

I noticed my post has been viewed more than 90 times, so I assume there's people looking for this or something similar.

Anyway, I GOT IT!!!! I'll post it here hoping it will help someone

You have to enable at least the vertical scrollbar of the panel. Here's how you can handle how much you want the scrollbar to move:

var panel1 = document.getElementById('PanelName');
if (panel1 !== null)
{
XCounter += 15;
panel1.scrollTop = XCounter;
}

Where XCounter is a variable you have to use to make the scrollbar move. This variable is an integer that tells the scrollbar which position it has to move to (in pixels).
So, with the down key you add and with the up key you substract, you just put this code in a function and set a condition depending on which action is being performed. I add/substract 15 pixels everytime I move but you can set the number to whatever you want.

If you want to go to the top you do: panel1.scrollTop = 0;

If you want to go to the bottom you do: panel1.scrollTop = panel1.scrollHeight;

I HOPE THIS IS UNDERSTANDABLE AND HELPFUL