Question

确定，

所以我有标准的sencha-touch面板，因为这个应用程序需要能够为移动用户和桌面（webkit）用户进行交互，所以我需要感觉和看起来像一个标准的Web应用程序。在使用桌面浏览器浏览时，如何使用永久浏览器滚动条替换触摸滚动条？

我确信我可以根据设备锻炼如何运行，但我不知道如何更换滚动条。我正在运行最新版本的sencha touch - 2 beta。

干杯，乔希

Answer 1

HTML / CSS对滚动条的外观和功能一无所知。您可以真正指定的是溢出模式，让浏览器知道您何时需要滚动。如果设置overflow: auto或overflow: scroll不会导致页面按预期呈现，则您必须接受它或滚动自己的基于JavaScript的滚动小部件。

Answer 2

好的，对于任何未来的sencha用户来说，这是我设法提出的解决方法：

在任何地方添加此功能：

var setupPCScrollbar = function(container){
    var isMobile = (navigator.appVersion.toLowerCase().indexOf("mobile") > -1 || navigator.appVersion.toLowerCase().indexOf("ipad") > -1);
    if(!isMobile){
        if(container.isXType('selectfield'))container = container.down('list');// Add support for selectbuttons
        if(!Ext.isFunction(container.getScrollable) || !container.getScrollable() || !Ext.isFunction(container.getScrollable().getScroller))return console.warn("Attempting to apply pc scroller to non-container item");
        container.getScrollable().getScroller().setDisabled(true);
        var scrollContainers = Ext.DomQuery.select('.x-scroll-container', container.element.dom);
        var scrollBars = Ext.DomQuery.select('.x-scroll-indicator', container.element.dom);
        for(var i=0;i<scrollContainers.length;i++)
            scrollContainers[i].style.overflow = "auto";
        for(var i=0;i<scrollBars.length;i++)
            scrollBars[i].style.zIndex = "-1";
    }
}

此功能将检查mobile / ipad，然后如果找不到这些（可能是pc），则禁用sencha touch滚动条，隐藏滚动条并添加标准html滚动条。

此功能用于举例如下，并且应该适用于面板，列表等：

var container = ...
setupPCScrollbar(container);

我希望将其作为插件实现，但不知道如何将其添加到'container'类的构造函数中。

**请注意，这是一款特定于ipad / pc的应用程序。

希望这有助于某人：）

如何使用标准浏览器滚动条替换默认的移动友好滚动条

2 个答案: