Как заменить стандартную полосу прокрутки для мобильных устройств на стандартную полосу прокрутки в браузере?

Question

Хорошо,

Итак, у меня есть стандартная сенсорная панель sencha, и поскольку это приложение должно быть способно взаимодействовать как для мобильных пользователей, так и для пользователей настольных компьютеров (webkit), мне нужно, чтобы это выглядело какстандартное веб-приложение.Как заменить сенсорные полосы прокрутки постоянными полосами прокрутки браузера при просмотре с помощью браузера на настольном компьютере?

Я уверен, что могу тренироваться, как работать на устройстве, но я не знаю, как заменить полосы прокрутки.Я использую последнюю версию 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";
    }
}

Эта функция будет проверять для мобильных устройств / iPad, затем, если ни один из них не найден (вероятно, ПК), отключите сенсорную полосу прокрутки sencha, скройте полосу прокрутки и добавьте стандартную полосу прокрутки html.

Эта функция используется, например, следующим образом и должна работать на панелях, спискахetc:

var container = ...
setupPCScrollbar(container);

Я бы хотел, чтобы это было реализовано как плагин, но не знаю, как добавить его в конструктор класса 'container'.

** обратите внимание, что этоприложение для ipad / pc.

Надеюсь, это кому-нибудь поможет:)