Hide scrollbars in WebView2

[jpalo]

How would I hide scrollbars in WebView2, like with classic WebBrowser you set ScrollBarsEnabled=false?

WinForms, C#

AB#26488166

[david-risney]

Great feature request! You might be able to inject CSS or script to hide scrollbars from within the web content, but we don't have a setting on the WebView2 API to turn off scrollbars.

Can you elaborate on your scenario? How are you using WebView2 and why is it useful to hide scrollbars in your case?

[dstaley]

In my particular case, I'd prefer to hide the scrollbars to prevent them from rendering. which disrupts the experience when the app is in dark mode since the scrollbars are white.

[jpalo]

Experience disruption here as well, picture speaks more than words.

This is how I injected CSS with previous WebBrowser control to modify some other things, I'd be happy to receive tips if I can do something similar with WebView2. In my case injecting JS would work as well.

private void SolarWebBrowser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
    IHTMLDocument2 doc = (solarWebBrowser.Document.DomDocument) as IHTMLDocument2;
    // The first parameter is the url, the second is the index of the added style sheet.
    IHTMLStyleSheet ss = doc.createStyleSheet("", 0);

    ss.cssText = Properties.Settings.Default.SolarGraphAdditionalStyles.Replace(";#GT;#", ">");
}

[david-risney]

We have CoreWebView2.ExecuteScriptAsync that will execute whatever JavaScript you pass in. Although I'm not sure what the equivalent of the code you have there would be in JS.

At any rate, we'll look into a setting to hide scrollbars.

Thanks!

[jpalo]

Of course, CoreWebView2.ExecuteScriptAsync worked great and was able to do all the things I needed including setting body overflow style to hidden to hide the scroll bars.

I will close this and leave it for you to decide if separate scrollbar hiding property is needed, I'm leaning towards it not being needed.

[mikemeinz]

I see this is closed but I would like to add my request for the ability to disable or hide scrollbars. My Windows Forms app displays content on a wall-mounted TV Monitor using WebView2. No reason for scrollbars to occupy screen space in this scenario.

Thanks.

[champnic]

@mikemeinz The workaround works, but you'd like an easier API, is that correct?

[julesx]

an API for this would be great.

[80lvlpalladin]

I would like to request an ability to hide scrollbars but retain scroll functionality. Default scrollbars don't fit well with my application UI.

[darbid]

I too would like to see the scroll bars removed. My use case is that I would like my WPF window not to be inflicted with an ugly 1980's styled scroll bar.

[champnic]

@darbid What's not to love about a gray rectangle? It probably saves battery life, or something :P

I didn't realize this was still marked as closed, so reopening and it's now tracked on our backlog. Thanks!

[mikemeinz]

@mikemeinz The workaround works, but you'd like an easier API, is that correct?

Yes!

[ghost]

We also would highly appreciate the API option for hiding scrollbars as we are using the WebView2 control on a small touchscreen.

@jpalo How did you manage to hide scrollbars using CoreWebView2.ExecuteScriptAsync()? Unfortunately I'm not familiar with JavaScript ...

[jpalo]

@heering You need to use the NavigationCompleted event handler and execute a simple javascript. Details here: https://blog.jussipalo.com/2021/02/webview2-how-to-hide-scrollbars.html

[ghost]

@jpalo Thank you very much. You saved my day 💯

[ghost]

@jpalo I now recogized that, with this workaround, scrolling is disabled at all. I just want to hide the scrollbars because our users want to scroll by swiping the touchscreen, so I tried a different script:

ExecuteScriptAsync("document.querySelector('body').setAttribute('style', '-ms-overflow-style: none; ');");

This style property is MS specific: https://reference.codeproject.com/Book/css/-ms-overflow-style

But without success. Do you have any idea? Is the syntax incorrect?

[champnic]

@heering The "-ms" prefix will only work with Internet Explorer and the old Microsoft Edge. The new Microsoft Edge is based on Chromium, so according to this page you can try the -webkit-scrollbar CSS psuedo-element. https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

[ghost]

@champnic I tried this (any many other syntax alternatives) with no luck: wv.ExecuteScriptAsync("document.querySelector('body').style['-webkit-scrollbar'] = 'display: none'"); I'm not used to JavaScrpt, so maybe there is a syntax problem.

[champnic]

I'm not familiar with the syntax here myself, but StackOverflow may be able to help: https://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript

You can also right-click > Inspect on your page to get access to devtools and try out javascript in the Console tab. This should enable a faster test loop than recompiling with a different ExecuteScriptAsync script.

[jpalo]

The correct code to run is

document.querySelector('body').style.overflow='scroll';
var style=document.createElement('style');
style.type='text/css';
style.innerHTML='::-webkit-scrollbar{display:none}';
document.getElementsByTagName('body')[0].appendChild(style);

but for some reason injecting new STYLE nodes isn't working in ExecuteScriptAsync on my machine. It does work if you manually run that Javasript in Debugging Console by Inspecting the WebView2.

[ukandrewc]

Working here??

[jpalo]

You mean it is working for you?

[ukandrewc]

Not sure it's doing it specifically for me ;-)

[ghost]

This snippet is working for me, too! Thanks a lot :)

[radove]

Still works, would be nice to have this feature official supported.

[microspaze]

Auto hide scrollbar for all web pages:

webView2.CoreWebView2InitializationCompleted += (sender, args) =>
            {
                if (args.IsSuccess && webView.CoreWebView2 != null)
                {
                    webView.CoreWebView2.DOMContentLoaded += (s, a) =>
                        {
                            //隐藏滚动条：https://blog.jussipalo.com/2021/02/webview2-how-to-hide-scrollbars.html
                            webView.ExecuteScriptAsync("document.querySelector('body').style.overflow='scroll';var style=document.createElement('style');style.type='text/css';style.innerHTML='::-webkit-scrollbar{display:none}';document.getElementsByTagName('body')[0].appendChild(style)");
                        };
                }
            };

[mikemeinz]

I removed scroll bars by including this in my style sheet: body{overflow:hidden;text-overflow:clip;white-space: nowrap;}

I'm no CSS expert so if anyone knows a better method, please comment.

[acrolink]

Seems no solution will work to disable the scrolling when viewing a PDF inside the webview2 browser.