WebView inside ScrollViewer with XAML element header - xaml

Question

In WebView I load HTML elements with WP 8.1. Whenever content exceeds the WebView height there is scroll without issues. My problem is that I have XAML elements in the top of the WebView, which have to scroll along with the WebView scroll.
Sourcecode:
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid VerticalAlignment="Top" >
<StackPanel x:name="xamlelement" Margin="15 20 0 0">
<textblock/>
-------
-------
-------
</StackPanel>
</Grid>
<Grid x:Name="testgrid" Grid.Row="1">
<WebView Margin="0 30 0 0" x:Name="msgContent" >
</WebView>
</Grid>
</Grid>
</ScrollViewer>
Whenever the WebView element "msgContent" scrolls I want the stackpanel "xamlelement" to scroll along with the WebView.

Answer 1

The problem here is we can disable webview scroll by this 2 steps
1 ) setting overhidden to html content loaded to the webview
2) setting height of webview equal to the html content loaded in it.
But then when we try to move in webview,the evnets are not passed to the parent scrollviewer element

Answer 2

WebView provides InvokeScript method, which executes the specified script function from the currently loaded HTML, with specific arguments. When WebView's LoadCompleted event occurs, I am invoking that JavaScript which disables the scrolling. Check out whole code given below.
string DisableScrollingJs = #"function RemoveScrolling()
{
var styleElement = document.createElement('style');
var styleText = 'body, html { overflow: hidden; }'
var headElements = document.getElementsByTagName('head');
styleElement.type = 'text/css';
if (headElements.length == 1)
{
headElements[0].appendChild(styleElement);
}
else if (document.head)
{
document.head.appendChild(styleElement);
}
if (styleElement.styleSheet)
{
styleElement.styleSheet.cssText = styleText;
}
}";
void webView_LoadCompleted(object sender, NavigationEventArgs e)
{
webView.InvokeScript("eval", new[] { DisableScrollingJs });
}
From codeproject.