Forum Discussion

lleppert's avatar
lleppert
Contributor
10 years ago

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 nav...
  • Colin_McCrae's avatar
    10 years ago

    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.

  • UnveN's avatar
    UnveN
    10 years ago

    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:

    1. 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).
    2. 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.
    3. 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.