有没有办法允许在剑道移动列表视图上进行鼠标滚动？答案

【问题标题】：Is there a way to allow a mouse-scroll on a kendo mobile listview?有没有办法允许在剑道移动列表视图上进行鼠标滚动？
【发布时间】：2013-03-21 15:19:50
【问题描述】：

我注意到，在带有列表视图的移动页面上“向下滚动”的唯一方法是单击并拖动。

对于在桌面上使用移动网站的人，有没有办法允许使用鼠标滚轮进行正常滚动？

【问题讨论】：

标签： kendo-ui kendo-mobile

【解决方案1】：

这是一个解决方法，使用带有 jquery.mousewheel.js 的 kendo mobile 在 Web 应用程序上使用鼠标滚轮进行移动视图滚动。

观点：

<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>

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（适用于 Chrome）

和

Fiddle Demo with Modernizr（也适用于其他浏览器）

在视图初始化期间，我们将滚动容器附加到 jquery.mousewheel 事件。当 jquery.mousewheel 事件到达时，我们必须获取滚动容器的 -transform css 属性来了解当前的 Y 变换是什么（kendo 移动滚动器使用 -transform 来定位自身）。之后我们调用scroller的scrollTo方法根据鼠标滚轮的delta属性进行上下滚动。

【讨论】：