c# UWP Webview inside Scrollviewer only not working on Mobile

Question

Got a weird one; I'm using a webview inside of a scrollviewer (so I can have a stackpanel above the webview that scrolls with it) and my solution works fine on desktop PC and tablet (using both mouse AND touch) but for some reason, on a mobile phone the page just wont scroll! No idea why. Here is what I have done:

<ScrollViewer Grid.Row="1" x:Name="theScrollViewer" HorizontalAlignment="Stretch" 
                  ScrollViewer.VerticalScrollBarVisibility="Hidden"
                  HorizontalScrollBarVisibility="Disabled">
            <WebView ScrollViewer.HorizontalScrollBarVisibility="Hidden" 
                 ScrollViewer.VerticalScrollBarVisibility="Hidden" 
                 Margin="0" x:Name="theWebView" 
                 Height="2000"
                 DefaultBackgroundColor="#ff2E2E2E" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>    
</ScrollViewer>

and to stop the scrolling in the webview I have added the following to the CSS loaded into the webview:

overflow-x:hidden;
overflow-y: hidden

The height property of the webview wont stay 2000; but I know for content in a scrollviewer to scroll it needs a height property. Anyway this works perfectly with mouse and touch on PCs and tablets, but on Windows 10 Mobile it just doesn't scroll.

Any ideas??

Grace Feng Grace Feng · Accepted Answer · 2016-09-26T06:49:50

Anyway this works perfectly with mouse and touch on PCs and tablets, but on Windows 10 Mobile it just doesn't scroll.

I think the problem is that your Webview will not pass the manipulation events to its parent ScrollViewer.

On PC, we can scroll the ScrollViewer by dragging Thumb in the ScrollBar or rolling the wheel of mouse, these two interactions can be detected by ScrollViewer.

But when on mobile, we can only scroll the ScrollViewer by swiping the content area inside the ScrollViewer, since your WebView fill the whole content of ScrollViewer, the swiping gesture will be caught by WebView firstly and not handle to ScrollViewer again, and now your WebView has enough height to hold the web content, the default scroll-function of WebView will also not work.

Here is a suggestion: Give a smaller Width to WebView when it works on mobile, and you can scroll the ScrollViewer by swiping on the blank area. But I think this is not a graceful solution to your problem, this will possible make the layout become ugly.

Another suggestion is that you can try to create your own Thumb in the right side of your StackPanel and WebView inside the ScrollViewer for scrolling, make this Thumb slid-able and programatically make the ScrollViewer scrolled when the Thumb is translated.

c# UWP Webview inside Scrollviewer only not working on Mobile

1 Answers