Обнаруживать, поддерживает ли мобильный браузер переполнение: прокрутка

Есть ли простое решение для JavaScript, которое является агностиком для устройств и библиотек?

Я хотел бы добавить класс к элементу html, чтобы я мог доставлять прокручиваемые контейнеры на мобильный, когда это возможно.

Это будет аналогичный подход, который принимает Modernizr, обнаруживая поддержку функций вместо обнаружения браузера. Я просто не хочу использовать всю инфраструктуру Modernizr. Попытка сохранить подсветку JavaScript для мобильного проекта.

Спасибо!

Ответы

Ответ 1

Это не идеально, но я использую это для обнаружения -webkit-переполнения прокрутки.

var overflowScrolling = typeof($("body")[0].style["-webkit-overflow-scrolling"]) !== "undefined";

Тогда я говорю, если не overflow-scrolling и мобильный, тогда я загружаю iScroll.

Это означает, что устройства, поддерживающие overflow: scroll, но не -webkit-overflow-scrolling, будут по-прежнему загружать iScroll, но это, по крайней мере, дает естественную прокрутку на iOS 5 и современный Android.

Ответ 2

Здесь находится решение, которое проверяет все возможные параметры, включая свойства префикса, отличные от поставщика, и не имеет каких-либо зависимостей от библиотек, таких как jQuery или Modernizr:

function hasOverflowScrolling() {
    var prefixes = ['webkit', 'moz', 'o', 'ms'];
    var div = document.createElement('div');
    var body = document.getElementsByTagName('body')[0];
    var hasIt = false;

    body.appendChild(div);

    for (var i = 0; i < prefixes.length; i++) {
        var prefix = prefixes[i];
        div.style[prefix + 'OverflowScrolling'] = 'touch';
    }

    // And the non-prefixed property
    div.style.overflowScrolling = 'touch';

    // Now check the properties
    var computedStyle = window.getComputedStyle(div);

    // First non-prefixed
    hasIt = !!computedStyle.overflowScrolling;

    // Now prefixed...
    for (var i = 0; i < prefixes.length; i++) {
        var prefix = prefixes[i];
        if (!!computedStyle[prefix + 'OverflowScrolling']) {
            hasIt = true;
            break;
        }
    }

    // Cleanup old div elements
    div.parentNode.removeChild(div);

    return hasIt;
}

alert(hasOverflowScrolling());

Ответ 3

Это очень хороший вопрос. К сожалению, в настоящее время, похоже, нет возможности надежно проверять поддержку overflow: scroll.

Филаментная группа имеет polyfill для этого, который вы можете использовать в своих проектах (см. http://filamentgroup.github.io/Overthrow/), но согласно сами по себе:

Проблема в том, что трудно - возможно, невозможно - проверить переполнение поддержка [...]

По необходимости Overthrow проверяет пользовательский агент строка для белого списка текущей и будущей версий мобильных платформы, которые, как известно, имеют встроенную поддержку переполнения, но не прежде чем проверять более надежные и агностические средства: iOS5 (и теперь Chrome Android тоже!) прокручивает CSS-свойство, и расширенный тест на вывод браузера на рабочем столе (поддержка сенсорных событий не поддерживается с экраном шириной более 1200 пикселей)