Scrolling in Windows Store applications is mostly done in horizontal mode. This is something quite easy to do with the GridView which support scrolling with mouse wheel but this can be a quite more complicated to do in Webview.
Indeed, in the Webview control, the mouse wheel scroll is done in vertical mode so here is a quick fix to perform the same scroll in horizontal mode.
To do this, you can use a JQuery plugin like JQuery.MouseWheel: https://github.com/brandonaaron/jquery-mousewheel
In your Webview, load JQuery and this plugin:
var scriptJQuery = "<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.js'></script>"; var scriptJQueryMouseWheel = "<script type='text/javascript' src='ms-appx-web:///Views/web/jquery.mousewheel.js'></script>"; var content = "<!doctype html><html lang=\"fr\"><head><link rel=\"stylesheet\" href=\"ms-appx-web:///Views/web/web.css\" type=\"text/css\" media=\"screen\" />" scriptJQuery + scriptJQueryMouseWheel + "</head>" + "<div id=\"articleContent\"><font id=\"article\" face=\"Segoe UI\">" + SelectedNews.Description + "</div></font>" + "</html>"; webView.NavigateToString(content);
Once this is done, we can just add a small JavaScript function to handle the “MouseWheel” event:
var mouseWheelScript = "<script type=\"text/javascript\">" + "$(function() {" + "$('html, body').mousewheel(function(event, delta) {" + "this.scrollLeft -= (delta * 50);" + "event.preventDefault();" + "});" + "});" + "</script>";
So the complete code is the following one:
var scriptJQuery = "<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.js'></script>"; var scriptJQueryMouseWheel = "<script type='text/javascript' src='ms-appx-web:///Views/web/jquery.mousewheel.js'></script>"; var mouseWheelScript = "<script type=\"text/javascript\">" + "$(function() {" + "$('html, body').mousewheel(function(event, delta) {" + "this.scrollLeft -= (delta * 50);" + "event.preventDefault();" + "});" + "});" + "</script>"; var content = "<!doctype html><html lang=\"fr\"><head><link rel=\"stylesheet\" href=\"ms-appx-web:///Views/web/web.css\" type=\"text/css\" media=\"screen\" />" + scriptResize + scriptVideo + scriptJQuery + scriptJQueryMouseWheel + mouseWheelScript + "</head>" + "<div id=\"articleContent\"><font id=\"article\" face=\"Segoe UI\">" + SelectedNews.Description + "</div></font>" + "</html>"; webView.NavigateToString(content);
Now, each time the Webview will get the focus, user will be able to perform a horizontal scrolling using the mousewheel.
Pretty simple when you know!
Please note that the plugin’s file is loaded from ms-appx-web to allow Webview to load it correctly.
Happy coding!