Wykryj, czy przeglądarka mobilna obsługuje przepełnienie: przewiń

Question

Czy istnieje proste rozwiązanie JavaScript, które jest niezależne od urządzenia i biblioteki?

Chciałbym dodać klasę do elementu html, aby móc dostarczać przewijane pojemniki na urządzenia mobilne, o ile to możliwe.

Jest to podobne podejście, które stosuje Modernizr, wykrywające obsługę funkcji zamiast wykrywania przeglądarki. Po prostu nie chcę używać całej struktury Modernizr. Próbuję zachować światło JavaScript dla projektu mobilnego.

Dzięki!

Answer 1

To nie jest doskonałe, ale używam tego do wykrywania przewijania -wtyczącego-przepełnienia.

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

Wtedy mówię, jeśli nie overflow-scrolling i mobilne następnie załadować iScroll.

Oznacza to, że urządzenia obsługujące overflow: scroll, ale nie -webkit-overflow-scrolling nadal będą ładować iScroll, ale to przynajmniej daje natywne przewijanie do iOS 5 i współczesnego Androida.

Answer 2

Oto rozwiązanie, które sprawdza wszystkie możliwe opcje, w tym zakaz dostawcy prefiksem właściwości i nie ma żadnych zależności na temat bibliotek takich jak jQuery lub 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()); 

Answer 3

To jest bardzo dobre pytanie. Niestety, obecnie wydaje się, że nie ma możliwości niezawodnego sprawdzenia obsługi overflow: scroll.

grupa włókien ma PolyFill na to, które możesz wykorzystać w swoich projektach (patrz http://filamentgroup.github.io/Overthrow/), ale według siebie:

Kłopot w tym, że trudno - być może niemożliwe - do testowania przepełnienia wsparcie [...]

z konieczności, Obalenie bada aplikacja kliencka ciąg do białej listy obecnych i przyszłych wersjach mobilnych platformach, które są znane posiada natywne wsparcie przepełnienia, ale nie przed sprawdzeniem przez więcej niezawodne i agnostyk środki, mianowicie: iOS5'S (! i teraz Chrome Android jest zbyt) dotknąć przewijanie właściwości CSS, i próbę wnioskowania szeroki przeglądarki pulpit (bez dotykowego obsługę zdarzeń z ekranem większym niż 1200 pikseli szerokości)