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??
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.