Question

因此，使用Sencha的假设优势是能够为多个平台提供1个代码库。我有一个项目，我需要在iOS，Android，PC和Mac上。我发现我可以使用Sencha Touch构建移动设备，并自动处理手指滑动事件。我遇到的问题是当我构建桌面应用程序时，它不会响应我的鼠标滚轮。

我一直在Sencha论坛上，这个问题在一个地方没有答案，而在另一个地方，他们承诺在2年前支持这个问题。我发现的任何第三方解决方案都没有正确记录或无法正常工作。在其他地方我被告知Sencha Touch用于移动开发，但Extjs用于桌面，但我真的不想为鼠标轮构建另一个代码库。

Answer 1

有一个JSfiddle here，当你鼠标向上滚动时delta会返回1，而当你鼠标滚动时会-1。

var doScroll = function (e) {
    // cross-browser wheel delta
    e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

    // Do something with `delta`
    console.log(delta);

    e.preventDefault();
};

if (window.addEventListener) {
    window.addEventListener("mousewheel", doScroll, false);
    window.addEventListener("DOMMouseScroll", doScroll, false);
} else {
    window.attachEvent("onmousewheel", doScroll);
}

将此代码放入应用程序的初始化块中。现在，无论哪个元素具有focus，此代码都将在您的应用中的任何位置运行。我在我的应用程序中很幸运，我的每个页面只有一个需要滚动的元素。

将console.log(delta);替换为确定哪个元素处于活动状态/哪个元素需要滚动的代码，以及用于滚动它的代码。

var scrollMe = Ext.getCmp("componentToScroll");
var currentY = scrollMe.getScrollable().getScroller().position.y;
var pageHeight = document.getElementById("orderList").clientHeight;;
var containerHeight = 722; //the defined height of the scrollMeContainer

var newY = currentY;
if (delta === 1) {
    if (currentY >= 30) {
        newY = currentY - 30;
    }
    else {
        newY = 0;
    }
}
else if (delta === -1) {
    if (currentY <= containerHeight - pageHeight - 30) {
        newY = currentY + 30;
    }
    else {
        newY = containerHeight - pageHeight;
    }
}
scrollMe.getScrollable().getScroller().scrollTo(0, newY);

将鼠标滚轮添加到Sencha Desktop App

1 个答案: