WebViewのスクロールに基づいて「上にスクロールする」ボタン

Question

WebViewを含むUWPアプリケーションを作成しています。単純な「上へスクロール」ボタンを実装したいと思っています。私は研究をしましたし、私...

 private async void ToTopButton_Click(object sender, RoutedEventArgs e) 
     { 
     var ScrollToTopString = @"var int = setInterval(function() { 
     window.scrollBy(0, -36); 

     if(window.pageYOffset === 0) 
      clearInterval(int); 
     }, 0.1);"; 
     await MyWebView.InvokeScriptAsync("eval", new string[] { ScrollToTopString }); 
     } 

をしかし、今、私はWebViewのスクロールが上にある場合、ボタンが非表示とその逆しなければならないので、ユーザは、それが必要な場合にのみ、ボタンを表示したい：それは動作します何も見つかりませんでした。誰も私を助けることができますか？ありがとう

Answer 1

私はボタンがWebViewスクロールが上にある場合、ボタンが隠されて、viceversaする必要があるので、それを表示するだけです。

WebViewのスクロールバーは、埋め込みエッジブラウザビューの一部であるため、アプリケーションから直接アクセスできません。スクリプトを使用してonscroll eventでスクロール操作を監視し、InvokeScriptAsyncでスクリプトを呼び出す必要があります。

そして、スクロールが上部にある場合は、あなたのuwpアプリケーションに通知する必要があるかもしれません。そのためにはScriptNotifyというイベントをWebviewというイベントで使用する必要があります。ページがwindow.external.notifyを呼び出し、文字列パラメータを渡すと、ホストされたHTMLページがWindowsストアアプリケーションのScriptNotifyイベントを発生させる可能性があります。

しかしScriptNotifyのノートについての注意を払う：

は、このイベントを悪用から悪意のあるスクリプトを防止するためには、信頼できるURIのためにそれを有効にしてください。

ページのURIを、アプリケーションマニフェストのApplicationContentUriRulesセクションに含める必要があります。 （これはVisual StudioでPackage.appxmanifestデザイナーの[コンテンツURI]タブで行うことができます）。このリストのURIはHTTPSを使用する必要があり、サブドメインのワイルドカード（たとえば「https://.microsoft.com」）を含むことがありますが、ドメインワイルドカード（たとえば、「https://.com」および「https：//。」）。ここで

は完成サンプルです：

<Button x:Name="ToTopButton" Content="to top" Click="ToTopButton_Click"></Button> 
<WebView x:Name="MyWebView" Height="500" Width="400" Source="https://www.microsoft.com/en-sg/" ScriptNotify="MyWebView_ScriptNotify" NavigationCompleted="MyWebView_NavigationCompleted"></WebView> 

コード

private async void ToTopButton_Click(object sender, RoutedEventArgs e) 
{ 
    var ScrollToTopString = @"var int = setInterval(function(){window.scrollBy(0, -36); if(window.pageYOffset === 0) clearInterval(int); }, 0.1);"; 
    await MyWebView.InvokeScriptAsync("eval", new string[] { ScrollToTopString }); 
} 

private void MyWebView_ScriptNotify(object sender, NotifyEventArgs e) 
{  
    var result = e.Value; 
    if (result == "true") 
    { 
     ToTopButton.Visibility = Visibility.Collapsed; 
    } 
    else 
    { 
     ToTopButton.Visibility = Visibility.Visible; 
    } 
} 

private async void MyWebView_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args) 
{ 
    string addlistener = @"window.onscroll = function() {myFunction()}; 
          function myFunction() 
          {if(window.pageYOffset === 0) window.external.notify('true'); else window.external.notify('false');} "; 
    await MyWebView.InvokeScriptAsync("eval", new string[] { addlistener }); 
    //first time check 
    var firstnotify = "if(window.pageYOffset === 0) window.external.notify('true'); else window.external.notify('false')"; 
    await MyWebView.InvokeScriptAsync("eval", new string[] { firstnotify }); 
} 

背後よく知らせるこの機能を使用する必要がありますない限り、これは非常にお勧めしませんパフォーマンスに影響を与える可能性があります。