WinRT - Multiple WebViews inside ScrollViewer

问题

I have a ScrollViewer and WebViews inside.

<ScrollViewer x:Name="ScrollViewer" 
              HorizontalScrollMode="Disabled" 
              VerticalScrollMode="Auto" 
              VerticalScrollBarVisibility="Hidden">
    <StackPanel Orientation="Vertical">
        <WebView/>
        <WebView/>
        <WebView/>
        ...
        <WebView/>  
    </StackPanel>
</ScrollViewer>

All of WebView's have height equals to its content (I implemented something like WrapContent for webView).
Now, the thing is, that the webviews are bouncing (rubber-band effect) while scrolling and scrollviewer not scroll! Sometimes its scrolls and sometimes not.
So my question is how to disable scrolling/bounce(rubber-band effect) for WebView?

回答1:

Not sure any of these two solutions might work for you but it might give you an idea in RE to what you can do. I'm assuming that the problem is the scrolling inside the WebView- which gets in the way of the ScrollViever. You could disable scroll by injecting JavaScript- the XAML code is further down: (added background color for clarity)

    private async void TestWebView_OnNavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
{
    var script = "document.documentElement.style.overflow = 'hidden';document.body.style.background = 'red';";
    await TestWebView.InvokeScriptAsync("eval", new string[] {script});
}

Or by adding an overlay (left 'column'):

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ScrollViewer x:Name="ScrollViewer" 
        HorizontalScrollMode="Disabled" 
        VerticalScrollMode="Auto" 
        VerticalScrollBarVisibility="Hidden">
    <Grid>
        <StackPanel Orientation="Vertical">
            <WebView NavigationCompleted="TestWebView_OnNavigationCompleted" x:Name="TestWebView" Height="800" Source="http://stackoverflow.com/"/>
            <WebView Height="500" Source="http://stackoverflow.com/"/>
        </StackPanel>
        <Grid Width="200" Background="Black" Opacity="0.5"  HorizontalAlignment="Left"/>
    </Grid>
</ScrollViewer>

Image:

回答2:

setting height of webview more than its content height and making the content style to overflow hidden will stop the rubberband effect

来源：https://stackoverflow.com/questions/27296790/winrt-multiple-webviews-inside-scrollviewer