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;
$(‘#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
if (viewState != appViewState.snapped) {
document.documentElement.onmousewheel = function (event) { $(‘#contenthost’).scrollLeft($(‘#contenthost’).scrollLeft() – event.wheelDelta); };
}
}
I tried it and this is just working in ie10 it is not working in metro style apps.
For anyone not able to get this to work, change #contenthost to .win-horizontal and you should be good to go.
Huh that's interesting. What Don suggested might work though. The thing is I don't really use Metro tags&objects. For now I just delete everything and go pure Html&Javascript so don't know much about classes or elements like .win-horizontal etc.
Also, thanks Don!
I'm using the Grid template and what I am trying to do is find out the scrollLeft value when I click a listview item and use it to position the page with the listview to the value it was before the click when I get back to the page again.
I was able to get the value of scrollLeft but can't seem to set it.
listViewhost = listView.querySelector(".win-horizontal");
position = listViewhost.scrollLeft;
and then
listViewhost.scrollLeft = position;
and it doesn't work, can you help please?
I'm really sorry for the laaate reply, pretty busy these days.
I pretty much stopped working on W8 after this post and forgot almost everything 🙁 I believe you set scrollLeft using something like this though;
listViewhost.scrollLeft(position);
if I recall correctly ( might be totally wrong ), it's not a variable, it's a function.