Metro Style Application & Horizontal Scrolling

So I’ve been playing with Windows 8 and WinRT for a while now, had a little problem the other day and thought it would worth to post the workaround I found.

If you ever saw a metro style application demonstration, you probably noticed that applications using metro design style prefers horizontal scrolling over vertical for big bodies. Obviously they thought that horizontal scrolling feel much more natural on a touch device ( which I actually agree ).

The problem is, it’s flat out horrible for Keyboard&Mouse devices ( aka. 99.9% of Windows users ). And for some reason, they didn’t implemented a function to bind mouse wheel scroll to horizontal scroll by default. Weird.

But well it’s not hard anyway, you just have to remember that you’re pretty much coding for IE. Which means you can use some IE functions that other browsers don’t support ( and that seems why they’re kinda forgotten I guess? )

So this is what you got to do;

    document.documentElement.onmousewheel = function (event) {
        $(‘#contenthost’).scrollLeft($(‘#contenthost’).scrollLeft() event.wheelDelta);
    };

Obviously ContentHost should be the element with scrollbar. And you should be careful using this because you obviously don’t want it in snapped view so

    updateLayout: function (element, viewState) {
        if (viewState != appViewState.snapped) {
            document.documentElement.onmousewheel = function (event) { $(‘#contenthost’).scrollLeft($(‘#contenthost’).scrollLeft() – event.wheelDelta); };
        }
    }
So that’s it, now your mouse wheel should scroll the page horizontally!
I hope you find it useful., see you in another post.