Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Disable WebView Scrolling in Windows Store Apps

DZone's Guide to

Disable WebView Scrolling in Windows Store Apps

· Java Zone
Free Resource

What every Java engineer should know about microservices: Reactive Microservices Architecture.  Brought to you in partnership with Lightbend.

WebView is a control which enables developers to host the HTML content. In WinRT framework WebView still lacks some features when we compare it to the WebBrowser of WPF. The WebView class inherits from the FrameworkElement class, but many properties of the base class are not working in WebView.

Recently I was creating an app and I wanted to disable the horizontal & vertical scrolling of WebView. I tried below given code.

<WebView x:Name="webView" Source="http://myawesomewebsite.com"
ScrollViewer.VerticalScrollBarVisibility="Disabled" 
ScrollViewer.VerticalScrollMode="Disabled"/>

But it didn't work. I was getting annoyed. I started Binging & Googling but didn't get any solution. WebView doesn't have its template also. Then I start analyzing the control in microscopic way. Finally I get to know that the scroll bars are due to HTML content, WebView itself doesn't have its own scroll bars. So I decided to go for JavaScript way. I applied some CSS properties in HTML content using JavaScript. It will display only that HTML content which is being displayed in current viewport or say display area. WebView provides InvokeScript method, which executes the specified script function from the currently loaded HTML, with specific arguments. When WebView's LoadCompleted event occurs, I am invoking that JavaScript which disables the scrolling. Check out whole code given below.

string DisableScrollingJs = @"function RemoveScrolling()
                              {
                                  var styleElement = document.createElement('style');
                                  var styleText = 'body, html { overflow: hidden; }'
                                  var headElements = document.getElementsByTagName('head');
                                  styleElement.type = 'text/css';
                                  if (headElements.length == 1)
                                  {
                                      headElements[0].appendChild(styleElement);
                                  }
                                  else if (document.head)
                                  {
                                      document.head.appendChild(styleElement);
                                  }
                                  if (styleElement.styleSheet)
                                  {
                                      styleElement.styleSheet.cssText = styleText;
                                  }
                              }";
 
void webView_LoadCompleted(object sender, NavigationEventArgs e)
{
    webView.InvokeScript("eval", new[] { DisableScrollingJs });
}
I hope this article will help you while developing WebView oriented app if you required such feature to implement.

Microservices for Java, explained. Revitalize your legacy systems (and your career) with Reactive Microservices Architecture, a free O'Reilly book. Brought to you in partnership with Lightbend.

Topics:

Published at DZone with permission of Farhan Ghumra. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}