Click here to Skip to main content
12,297,982 members (53,650 online)
Click here to Skip to main content
Add your own
alternative version

Stats

6.8K views
1 bookmarked
Posted

Disable WebView scrolling in Windows Store Apps

, 31 Jan 2014 CPOL
Rate this:
Please Sign up or sign in to vote.

Introduction

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. WebView class inherits from FrameworkElement class, but many properties of base class in not working in WebView.

Background 

Recently I was creating an app and I want 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 start 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.  

Using the code

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(&quot;eval&quot;, new[] { DisableScrollingJs });
}

I hope this article will help you while developing WebView oriented app if you required such feature to implement. 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Farhan Ghumra
Software Developer (Senior) Simform Solutions Pvt. Ltd.
India India
Windows Metro Store Apps Developer having 1+ year of experience

Follow me on: My Blog on Windows 8 | Twitter | Facebook | LinkedIn

Check Out My Articles & Tips on CodeProject

You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160525.2 | Last Updated 31 Jan 2014
Article Copyright 2014 by Farhan Ghumra
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid