使用XAML元素头的ScrollViewer内部的WebView

Question

在WP 8.1中，我使用WebView加载HTML元素。每当内容超过WebView高度时，就会出现滚动条而没有问题。我的问题是，我在WebView顶部有XAML元素，这些元素必须随着WebView滚动而滚动。

源代码：

<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>

无论何时 WebView 元素 "msgContent" 滚动，我希望 stackpanel "xamlelement" 也随着 WebView 滚动。

- Ganapathy

---

你可以注入到 WebView 中，关闭溢出处理以启用其滚动，这样 ScrollViewer 将处理所有滚动。现在的方式我猜想实际上是一个滚动内部嵌套了另一个滚动，对吧？ - Chris W.

Answer 1

这里的问题是，我们可以通过以下两个步骤禁用webview滚动： 1）将overhidden设置为加载到webview中的html内容 2）将webview的高度设置为加载在其中的html内容的高度。

但是，当我们试图在webview中移动时，事件不会传递给父级scrollviewer元素。

- anand jothi

---

有没有办法在加载HTML响应式网页时找到其高度？ - Sebastian

在webview中添加scriptnotify监听器，并在html页面中添加resize事件监听器，将文档高度从脚本发送到c#代码的scriptnotify。 - anand jothi

Answer 2

WebView提供了InvokeScript方法，它可以执行当前加载的HTML中指定的脚本函数，并带有特定的参数。当WebView的LoadCompleted事件发生时，我会调用那个禁用滚动条的JavaScript。请查看下面给出的完整代码。

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 });
}

来自codeproject。

- Thomas Bouman