Is there a way to allow a mouse-scroll on a kendo mobile listview?

Question

I've noticed that the only way to "scroll" down on a mobile page with a listview is to click and drag.

Is there a way to allow a normal scroll using a mouse wheel, for folks that are using the mobile site on their desktops?

Answer 1

Here is a workaround using kendo mobile with jquery.mousewheel.js to make a mobile view scroll using mouse wheel on a web application.

The View:

<div data-role="view" id="tabstrip-editor" data-init="attachToScroller">
<ul data-role="listview" data-style="inset" data-type="group">
    <li>item 1</li>
    <li>item 2</li>
</ul></div>

The Javascript:

function matrixToArray(matrix) {
    return matrix.substr(7, matrix.length - 8).split(', ');
}

function attachToScroller(e) {
    var scroller = e.view.scroller;

    e.view.scroller.element.find('.km-scroll-container').mousewheel(function (event, delta, deltaX, deltaY) {
        event.preventDefault();
        var matrix = matrixToArray($(event.currentTarget).css("-webkit-transform"));
        var currentScroll = parseInt(matrix[5], 10);
        var scrollingamount = currentScroll + deltaY * 15;
        if (deltaY > 0) {            
            if (-currentScroll > 9)
                scroller.scrollTo(0, scrollingamount);
            else
                scroller.scrollTo(0, 0);
        }
        else {
            var maximum = scroller.scrollHeight() - $(scroller.element).height();
            if(maximum + currentScroll > 0)
                scroller.scrollTo(0, scrollingamount);
            else
                scroller.scrollTo(0, -maximum);
        }
    });
}

Fiddle Demo Here (for chrome)

and

Fiddle Demo with Modernizr (for other browsers as well)

during the view init we attach the scroller container to jquery.mousewheel event. When a jquery.mousewheel events arrives, we have to grab the -transform css property of the scroller container to learn what is the current Y transformation (kendo mobile scroller uses -transform to position itself). After that, we call the scrollTo method of scroller to scroll up or down according to mousewheel's delta property.