WebView inside ScrollViewer with XAML element header

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.

Echols

You could inject into the WebView to turn off the overflow handling that enables its scrolling so that the ScrollViewer handles all the scrolling instead. The way you have it now I'm guessing it's actually a scroll within a scroll right? – Adrien

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

Evident

Is any way to find the height of the html content loaded [ IN case of html responsive web pages'] – Terpene

Add a listener to scriptnotify in webview and add listener to resize event in html page and send the height of document from scipt to scriptnotify in c# code – Evident

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.

Harpp