Manipulating web browser scroll position on Windows Phone 7

Manipulating the browser control position on WP7 is relatively straight forward, all you need to is a couple of calls out to javascript using the InvokeScript method on the browser control. In fact this is the same pattern provided in the desktop version of WPF & Silverlight.

The only requirement is the ability to include a couple of javascript functions in a web page. Now this is only possible if you either have control over the remote content or you're using local content on the device. Recently I've been working on a phone app that uses local content. This content is designed for a particular profession who need to access to detailed and intricate data in a fast and easy manner. Each page conforms to a standard model with a simple breadcrumb style at the top to help with navigation and very detail data with embedded links. When  a page is bookmarked or the back button is used to navigate the app we are need to get the scroll positions.

So shown below is a simple test app for manipulating the scroll position, as you can see it has a set of buttons for  changing the scroll positions programmatically, so when I start the app and get the vertical & horizontal scroll positions they return '0' as expected. After zooming in and moving around the page and then getting the positions again you can see they have changed. Similarly if I enter a position and click a 'Set' button you would observe the browser scroll position changing:

So the C# code to call out to javascript is very simple and as I said before this is exactly same code I would use for WPF or desktop Silverlight application:

private void setVScrollClick(object sender, RoutedEventArgs e)
{
    try
    {
        this.webBrowser.InvokeScript("setVerticalScrollPosition", this.vScrollPos.Text);
    }
    catch (Exception exn)
    {
    }
}

private void getVScrollClick(object sender, RoutedEventArgs e)
{
    try
    {
        object pos = this.webBrowser.InvokeScript("getVerticalScrollPosition");
        this.vScrollPos.Text = pos.ToString();
    }
    catch(Exception exn)
    {
    }
}

private void getHScrollClick(object sender, RoutedEventArgs e)
{
    try
    {
        object pos = this.webBrowser.InvokeScript("getHorizontalScrollPosition");
        this.hScrollPos.Text = pos.ToString();
    }
    catch (Exception exn)
    {
    }
}

private void setHScrollClick(object sender, RoutedEventArgs e)
{
    try
    {
        this.webBrowser.InvokeScript("setHorizontalScrollPosition", this.hScrollPos.Text);
    }
    catch (Exception exn)
    {
    }
}

And finally the javascript, as I said you'll need some ability to get these functions included in the page directly or into a javascript file. We had the ability when the local content was installed on the device to inject these functions into the javascript  file:

function getVerticalScrollPosition() {
return document.body.scrollTop.toString();
}
function setVerticalScrollPosition(position) {
document.body.scrollTop = position;
}
function getHorizontalScrollPosition() {
return document.body.scrollLeft.toString();
}
function setHorizontalScrollPosition(position) {
document.body.scrollLeft = position;
}

There is one small but important fact to remember when calling out to javascript from managed code is any value returned from javascript has to be a string value. This means if the 'getVerticalScrollPosition' method above returned a number value it would not be marshalled to managed code.

The application I used for this post can be found here.