uwp以编程方式上下滚动WebView

Question

我正在创建一个简单的新闻提要，用户可以打开一个webview来查看新闻的详细信息，出于某种原因，我希望用户可以使用按钮来控制webview的上下滚动，而不是使用scrollviewer，所以我创建了webview显示详细信息，但不知道如何使用按钮上下滚动

Answer 1

for some reason i want user can use buttons to control the webview scroll up and down instead of using scrollviewer. 由于某些原因，我希望用户可以使用按钮来控制Webview上下滚动，而不是使用scrollviewer。

For your requirement, you could use InvokeScriptAsync method to notify javaScrip to invoke custom scroll method. 根据您的要求，可以使用InvokeScriptAsync方法来通知javaScrip调用自定义滚动方法。 For more please refer to Interacting with WebView content. 有关更多信息，请参阅与WebView内容交互。 And I have created a sample to achieve a simple page scrolling. 我创建了一个示例来实现简单的页面滚动。 Please refer to the following code: 请参考以下代码：

HtmlPage HtmlPage

<body>
    <div id="test" style="width: 600px;height: 400px;padding: 10px;margin: 10px;border: 1px solid black;overflow:scroll;font-size:15px;line-height:200px;">
        Content
    </div>
    <script type="text/javascript">
        function ScrollDownBtn() {
            test.scrollTop += 10;
        }

        function ScrollUpBtn() {
            test.scrollTop -= 10;
        }
    </script>
</body>

MainPage.xaml MainPage.xaml中

<WebView x:Name="MyWebView" Source="ms-appx-web:///NewsPage.html" />
<StackPanel
    Grid.Row="1"
    HorizontalAlignment="Center"
    Orientation="Horizontal">
    <Button
        x:Name="ScrollUp"
        Margin="10"
        Click="ScrollUp_Click"
        Content="ScrollUp" />
    <Button
        x:Name="ScrollDown"
        Margin="10"
        Click="ScrollDown_Click"
        Content="ScrollDown" />
</StackPanel>

MainPage.xaml.cs MainPage.xaml.cs中

private async void ScrollUp_Click(object sender, RoutedEventArgs e)
{
    await MyWebView.InvokeScriptAsync("ScrollUpBtn", null);
}

private async void ScrollDown_Click(object sender, RoutedEventArgs e)
{
    await MyWebView.InvokeScriptAsync("ScrollDownBtn", null);
}

This is code sample . 这是代码示例。

uwp以编程方式上下滚动WebView

问题描述

1 个解决方案

解决方案1
2 2017-07-31 03:19:57

uwp以编程方式上下滚动WebView

问题描述

1 个解决方案

解决方案1 2 2017-07-31 03:19:57

解决方案1
2 2017-07-31 03:19:57