Disable WPF WebBrowser scrollbar

Question

I am trying to hide the webbrowser scrollbar, but it is still visible.

XAML:

<WebBrowser Name="wb" Width="700" Height="600" 
                        OverridesDefaultStyle="False"
                        ScrollViewer.CanContentScroll="False"
                        ScrollViewer.HorizontalScrollBarVisibility="Hidden" 
                        ScrollViewer.VerticalScrollBarVisibility="Hidden" />

Thank you.

Answer 1

This works for me:

<WebBrowser LoadCompleted="wb_LoadCompleted"></WebBrowser>           

void wb_LoadCompleted(object sender, NavigationEventArgs e)
    {
        string script = "document.body.style.overflow ='hidden'";
        WebBrowser wb = (WebBrowser)sender;
        wb.InvokeScript("execScript", new Object[] { script, "JavaScript" });
    }

This way you don't need mshtml

Answer 2

Not ideal but it works :

Add Microsoft.mshtml to your project references. Then change your xaml to this :

<WebBrowser Name="wb" Width="700" Height="600" 
            OverridesDefaultStyle="False"
            ScrollViewer.CanContentScroll="False"
            ScrollViewer.HorizontalScrollBarVisibility="Hidden" 
            ScrollViewer.VerticalScrollBarVisibility="Hidden"
            LoadCompleted="wb_LoadCompleted"></WebBrowser>

and in your code behind :

private void wb_LoadCompleted(object sender, System.Windows.Navigation.NavigationEventArgs e)
{
    mshtml.IHTMLDocument2 dom = (mshtml.IHTMLDocument2)wb.Document;
    dom.body.style.overflow = "hidden";
}

Answer 3

Adding scroll="no" to the html body tag worked for me while other suggestions here did not.

Answer 4

in your html ....

 html{overflow:hidden;}

it should solve it or you can use meta tag to specify Ie render mode

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

Answer 5

Add Microsoft.mshtml to your project references. You dont need to change any of the scroll properties in XAML as they are not the one controlling the webbrowser when mshtml is used. In the LoadCompleted function do the following:

private void webBrowserChat_LoadCompleted(object sender, NavigationEventArgs e)
{
    mshtml.IHTMLDocument2 documentText = (IHTMLDocument2)webBrowserChat.Document; 
    //this will access the document properties 
    documentText.body.parentElement.style.overflow = "hidden"; 
   // This will hide the scrollbar (Set to "auto" if you want to see when it passes the surfacelimit)
}

Answer 6

Sorry a bit late, but I finally am able to disable the scrollbar. The hint from @Devdude was the key.

The main point is to set the overflow = hidden, but how to do that in WPF? I used DependencyObject so that I can bind: enable and disable whenever I want.

First of all you need to add reference to mshtml. In your project, add reference add Microsoft.mshtml. Then in your .cs file add:

using mshtml;

The DependencyObject

public class WebBrowserUtility : DependencyObject
{
    public static readonly DependencyProperty HideScrollBarProperty = DependencyProperty.RegisterAttached(
        "HideScrollBar",
        typeof(string),
        typeof(WebBrowserUtility),
        new UIPropertyMetadata(null, HideScrollBarPropertyChanged));

    public static string GetHideScrollBar(DependencyObject obj)
    {
        return (string)obj.GetValue(HideScrollBarProperty);
    }
    public static void SetHideScrollBar(DependencyObject obj, string value)
    {
        obj.SetValue(HideScrollBarProperty, value);
    }
    public static void HideScrollBarPropertyChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
    {
        WebBrowser browser = obj as WebBrowser;
        string str = args.NewValue as string;
        bool isHidden;
        if (str != null && bool.TryParse(str, out isHidden))
        {
            browser.HideScrollBar(isHidden);
        }
    }
}

The WebBrowser Extension, which actually does the work to disable the overflow, which only happens after WebBrowser Document Load is Completed:

public static class WebBrowserExtension
{
    public static void HideScrollBar(this WebBrowser browser, bool isHidden)
    {
        if (browser != null)
        {
            IHTMLDocument2 document = browser.Document as IHTMLDocument2;
            if (document == null)
            {
                // If too early
                browser.LoadCompleted += (o, e) => HideScrollBar(browser, isHidden);
                return;
            }

            //string bodyOverflow = string.Format("document.body.style.overflow='{0}';", isHidden ? "hidden" : "auto");
            //document.parentWindow.execScript(bodyOverflow); // This does not work for me...

            string elementOverflow = string.Format("document.documentElement.style.overflow='{0}';", isHidden ? "hidden" : "auto");
            document.parentWindow.execScript(elementOverflow);
        }
    }
}

To use in the XAML

<WebBrowser ns:WebBrowserUtility.HideScrollBar="True"/>

Note: Make sure that you stretch the WebBrowser to see the whole contents. Regardless, the scrollbar will be hidden this time.

Answer 7

I used this simple one line to directly define the body of the document:

wb.Document.Body.scroll = "no"

Answer 8

I've made my WebBrowser control wider than the visible area by 16 pixels which is the width of the scrollbar.

This will only work if your web browser control touches the far right of your app. The web browser control will not allow other XAML elements on top of it, but you can make it overflow the edge of your app.

I've done this in a Loaded event handler for the window:

private void AppLoaded(object sender, RoutedEventArgs routedEventArgs)
{
    WebBrowserView.Width = WebBrowserView.ActualWidth + 16;
}

I found injecting JavaScript into the page seemed to break some pages and the scrollbar would only disappear once the page had completed loading.

Answer 9

The overflow property assigned with hidden value on body tag solves this issue.

If you have a css rule-set for your body tag, add the following line to it:

overflow: hidden

Otherwise, add the following line to your concrete <body> tag deceleration:

style="overflow:hidden"

Answer 10

This isn't quite the same problem you all had, but my searching brought me here so I hope this helps someone. I was trying to embed a PDF document using the WPF WebBrowser component. Turns out it was the PDF viewer (called from the browser) that was creating the scroll bars!

To solve it add parameters to the call to the PD file. In my XML: Source="http://address/file.pdf#toolbar=0&navpanes=0&scrollbar=0"

In the code behind it would be in the format as follows: http://address/file.pdf#toolbar=0&navpanes=0&scrollbar=0

(Thanks to leeand00 for this solution from his answer to this question.)