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

Question

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

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

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

Спасибо!

Answer 1

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

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

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

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

Answer 2

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

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

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

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

Answer 3

Вот решение, которое проверяет все возможные варианты, включая свойства с префиксом не поставщика, и не имеет каких-либо зависимостей от библиотек, таких как 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());