Reputation: 47
I have an application which has a side bar, and one of the items in the sidebar is a Settings option. This option in the side bar has many sub-items, these items being the different headers on the Settings page. This page which contains every Settings item, and I am looking for a way to set the ScrollPane's vvalue of this window based on which sub-item was selected so that the item they selected will be at the very top of the screen.
I have been successful with hard coding the vvalue, of course, but once the size of the window changes it is no longer scrolled down to the exact point in which I want it to be. Below you can see an image of my application on the Settings page. Based on the image, if the user would select the Setting2 option in the sub menu, I would want the ScrollPane's vvalue to change where the Setting2 header was at the very top of the screen no matter what the size of the application window is.
Upvotes: 0
Views: 84
Reputation: 47
Following @jewelsea 's approach I was able to fix my problem, thanks!
His answer was:
Could you put the Settings objects on the right into a ListView and use scrollTo(object) to scroll to the appropriate setting?
Upvotes: 1
Reputation: 82461
You can calculate the value to assign to the vvalue
property based on the position of the top in the content
node (posY
), the total height of the content (contentHeight
) and the height of ScrollPane.viewport
(viewportHeight
):
vvalue = topY / (contentHeight - viewportHeight)
(that is assuming you haven't changed vmax
and vmin
)
You may need to use Node.localToParent
multiple times to compute the correct position in coordinates of the content
node; It needs to be applied to the node itself and every ancestor up to the child of the content
node.
Upvotes: 0