locked
Use a WebView inside a ScrollViewer

    Question

  • Hello

    I am currently trying to put a WebView inside a ScrollViewer.

    I want to display HTML content with a header above it (a StackPanel). But I need the header panel to scroll with the webview (I do not want it to be fixed at the top).

    So I made the WebView as tall as its content in order to avoid having a scrollbar in it, and I put my StackPanel and WebView inside a ScrollViewer.

    However, the scrolling behavior is pretty erratic. I can scroll successfully most of the time, but if I scroll too fast, it seems that the WebView "catches" my touch and tries to scroll itself.

    Since the webview cannot scroll since it's already tall enough, the content moves a bit and goes back to its original position when I release my finger (like when you try to scroll a list but you're already at the top).

    I tried various CSS attributes on the content's <html> and <body> tags (overflow: hidden, , -ms-scroll-chaning: chained to name a few) but without success. I only managed to disable the "scroll boundary feedback effect" with overflow hidden, but it still wouldn't scroll the parent ScrollViewer.

    Note that scrolling works correctly when using a mouse. Only scrolling using touch seem affected.

    Thanks for your help

    Thursday, October 30, 2014 2:42 PM

All replies

  • It might be easier to put the necessary HTML into the webpage itself, then avoid the whole problem.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Thursday, October 30, 2014 7:21 PM
    Moderator
  • ScrollViewer is designed to handle content that is bigger than the surrounding container. So normally your ScrollViewer's height is smaller than its content's.

    Just adjust the height of your ScrollViewer and content, e.g.:

    <ScrollViewer Height="500" VerticalAlignment="Top" VerticalScrollBarVisibility="Visible" VerticalScrollMode="Enabled" AllowDrop="False" BringIntoViewOnFocusChange="True" HorizontalScrollMode="Disabled" IsHoldingEnabled="True" >
    <Grid Grid.Row="1" x:Name="ContentRoot" Height="800" Width="386" >
    [..]
    
    </Grid>
    </ScrollViewer>

    In your case the Grid is much smaller than the ScrollViewer so I'd expect the behaviour you are describing.

    Monday, November 03, 2014 7:43 AM
  • Thanks. I thought about it but I'd like to avoid designing this header in HTML. I am displaying external content in the webview so I would have to inject the header using Javascript I guess? I am a bit concerned about security too.

    However, I noticed that when the keyboard is open, the whole app is scrollable. When I have a webview in my page, I can scroll the webview correctly with touch, and when I am at the webview scroll's boundary, the "app" scrollviewer scrolls correctly. Would it be possible to reproduce this behavior with any scrollviewer?

    Tuesday, November 04, 2014 8:13 AM
  • Can you provide code for this?

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Friday, November 21, 2014 2:05 PM
    Moderator