Question

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

Answer 1

出于某种原因，我希望用户可以使用按钮来控制webview向上和向下滚动，而不是使用scrollviewer。

根据您的要求，您可以使用InvokeScriptAsync方法通知javaScrip调用自定义滚动方法。有关更多信息，请参阅Interacting with WebView content.我已经创建了一个示例来实现简单的页面滚动。请参考以下代码：

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

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

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

这是代码sample。

uwp以编程方式向上和向下滚动WebView

1 个答案: