scrollIntoView in navigation pane
Hello,
Does anybody have any tips for using the scrollIntoView method in a sidebar navigation pane? The method works great if I need to scroll to an object on the main page, but our app has a navigation pane along the left side of the page that contains a scroll bar. I cannot for the life of me get the scrollIntoView method to work on an object in this navigation pane. I have tried setting focus, and clicking on the scroll bar first, but that is not working.
Has anybody else encountered this problem?
Thanks.
I haven't personally, anything I've had to use ScrollIntoView for has always worked OK.
If the method is not working, you can try writing a helper function to do it?
If you put the container object in focus, do you have any way of making it scroll? MouseWheel, some other scroll method?, even hitting the up/down arrow keys?
As long as you can make it scroll somehow, you can use some sort of loop.
(pass in the control container and the desired control you want to find)
Pseudocode:
Do
Check target visibility
Is target visible?
Yes - Exit Loop
No - Do a small scroll and refresh object stats
End Loop
You would probably also want to include some sort of secondary exit clause as well. So you don't get stuck in an endless loop.
If you can tell when the scroll has got to the bottom of the container (no idea how, scroll bar position or something?) then use that.
If not, just set a maximum number of scrolls before it gives up. (also pass this into the helper function)
Leaving you with:
Do
Check target visibility
Is target visible?
Yes - Exit Loop with FOUND status
No - Do a small scroll and refresh object stats
Have you reached the bottom of the container or max no. of scrolls?
Yes - Exit loop with NOT FOUND status
End Loop
I've had to use this sort of helper function in the past when I used QTPro. Never had to build one yet for TC though.
Do it right, and you can intergate it into the IDE as a script extension.
Hello,
It is really strange that scrollIntoView() does not work for you, it generally working fine even if your element is inside iframe. As far as i recall it had some problems in like IE8. Anyway you can always do the scroll manually, here is the way:
- Using TC Object Spy locate the element on your navigation pane that actually owns that scroll bar (just drag the target pointer over the scroll bar and TC should select the owner element).
- Now (assuming the scroll bar is vertical) you need the scrollTop property of the selected element. The property is settable and determines the amount of scrolling done to the content of the element (in pixels, see for more details: Element.scrollTop). The maximum value is determined by the scrollHeight property.
- And now you can simply scroll to the desired item manually and see the needed value for the scrollTop property to be set in your script. Note that this approach is not accurate because the pane content might change / scale to different views. The better solution is to set scrollTop of the selected element to the offsetTop (HTMLElement.offsetTop) of the desired item. The only problem that the selected element might not be the direct offset parent of the desired item so you will need to go through the parent chain and calculate the total offset.
