WinJS – Navigate in a ListView using mouse wheel is easy !

The listview can be considered as the most powerful control of the WinJS UI controls.
It works very well in ‘touch mode’ and the user experience is just great !

When it comes to use the mouse & keyboard, the scrollbars appears and you can use them to navigate in the list.
Then, the first thing you may try is to use the mouse wheel : no result at all !
By default, you can’t navigate in the listview using the mouse wheel.

I think it can be really strange for user who are used to this behavior and in this post we’ll see how it’s easy to implement the mouse-wheel scroll !

The solution

The first thing is to create a Listview control in your HTML. Nothing unusual here :
[html]<div id="myListView" data-win-control="WinJS.UI.ListView">
</div>[/html]

Then in the javascript code-behind file (:)), you subscribe to the mouse wheel event. When you receive the event, you just have to set the scroll position of the Listview. You can use the well-named scrollPosition of the listview object to set the scroll. Nothing more 🙂
[javascript]
_listView = document.getElementById("myListView").winControl;
_listView.element.addEventListener("mousewheel", function (eventObject) {
var delta = -Math.round(eventObject.wheelDelta);
_listView.scrollPosition = _listView.scrollPosition + delta;
});[/javascript]

You don’t have to check in which state is your list view (ListLayout, GridLayout, horizontal, vertical, etc.) because everything is managed for you by the Listview. Ourah !

CSS Animations and javascript

Internally, the Listview controls use the scrollLeft and scrollTop properties of its underlying element. These are not CSS properties and they can’t be animated. Sorry, you won’t have smooth scroll with the mouse-wheel with CSS.

I didn’t have time to try it but I am pretty sure that you can do it using pure javascript. I link you to this post of David Catuhe who created a beautiful javascript animations helper. He is the first David who talked about it…

Hide the scrollbar ?

One more thing ! You may want to hide the scrollbar and let the user sroll with it’s finger or the mouse. It’s possible but I don’t think it’s a good idea because the user won’t be able to know where he is on the list. Also he may not think to use the mouse-wheel and be stuck with the first page :-(.

But if you propose an another way to navigate in the list, this CSS should hide the scrollbar :

[css].win-viewport {
overflow-x: hidden !important;
overflow-y: hidden !important;
}[/css]