How do I manipulate the scroll bars so that a div with content thatchanges size shows the content at

[Shauniwthanau]

I'm sorry if this is the wrong place to ask this but my justification
is that I have seen this done in WPF and I am wondering how to
implement the same thing that is cross-browser compliant and using
only javascript/CSS/HTML.

What I have is a div with overflow:auto, but really could be any
container, which is for example is 800*800 px and inside of this div
is a SVG image, which changes size. It can fit in the div but it can
also get very large, say 5000*5000 px, and I need to manipulate the
scrollbars so that when the SVG has changed size the scrollbars adjust
so that you are seeing the same location on the SVG that you were
seeing before.

This is what I would like to reproduce:
Initially set the center as the center of the SVG so that when the SVG
gets larger then the container the scrollbars automatically scroll to
show the center of the SVG. If the user scrolls, then the view-ports
center is updated and any changes in size now centers your view-port
there.

In WPF they were able to access the view-port of the container and
using that along with the height and width of the container (used to
calculate the center) they were able to accomplish this.

Any help would be greatly appreciated.

 

[Shauniwthanau]

Here is the code written in WPF:

//Gets the center of the viewport
Point newPt = new Point(
scrollViewer1.ViewportWidth / 2,
scrollViewer1.ViewportHeight / 2);

//This makes it into a point relative to the print
centerPoint = scrollViewer1.TranslatePoint(newPt,
PrimaryCanvas);

//This divides by the scale of the smart print, so that the point is
absolute in reference to the full size smartprint
centerPoint.X = (this.DataContext as
Work.ViewModel.AddViewModel).TranslateCoordFrom((int)centerPoint.X);
centerPoint.Y = (this.DataContext as
Work.ViewModel.AddViewModel).TranslateCoordFrom((int)centerPoint.Y);


//Recenters view after zooming

//This multiplies the points by the new scale, and subtracts half the
width of the scrollviewer so that when calling ScrollTo the point is
centered.

int locx = (this.DataContext as
Work.ViewModel.AddViewModel).TranslateCoordTo((int)centerPoint.X);
locx -= (int)(scrollViewer1.ActualWidth / 2);

int locy = (this.DataContext as
Work.ViewModel.AddViewModel).TranslateCoordTo((int)centerPoint.Y);
locy -= (int)(scrollViewer1.ActualHeight / 2);

scrollViewer1.ScrollToHorizontalOffset(locx);
scrollViewer1.ScrollToVerticalOffset(locy);