Есть ли простое решение для JavaScript, которое является агностиком для устройств и библиотек?
Я хотел бы добавить класс к элементу html, чтобы я мог доставлять прокручиваемые контейнеры на мобильный, когда это возможно.
Это будет аналогичный подход, который принимает Modernizr, обнаруживая поддержку функций вместо обнаружения браузера. Я просто не хочу использовать всю инфраструктуру Modernizr. Попытка сохранить подсветку JavaScript для мобильного проекта.
Спасибо!
Это не идеально, но я использую это для обнаружения -webkit-переполнения прокрутки.
var overflowScrolling = typeof($("body")[0].style["-webkit-overflow-scrolling"]) !== "undefined";
Тогда я говорю, если не overflow-scrolling и мобильный, тогда я загружаю iScroll.
Это означает, что устройства, поддерживающие overflow: scroll, но не -webkit-overflow-scrolling, будут по-прежнему загружать iScroll, но это, по крайней мере, дает естественную прокрутку на iOS 5 и современный Android.
Здесь находится решение, которое проверяет все возможные параметры, включая свойства префикса, отличные от поставщика, и не имеет каких-либо зависимостей от библиотек, таких как 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());
Это очень хороший вопрос. К сожалению, в настоящее время, похоже, нет возможности надежно проверять поддержку overflow: scroll.
Филаментная группа имеет polyfill для этого, который вы можете использовать в своих проектах (см. http://filamentgroup.github.io/Overthrow/), но согласно сами по себе:
Проблема в том, что трудно - возможно, невозможно - проверить переполнение поддержка [...]
По необходимости Overthrow проверяет пользовательский агент строка для белого списка текущей и будущей версий мобильных платформы, которые, как известно, имеют встроенную поддержку переполнения, но не прежде чем проверять более надежные и агностические средства: iOS5 (и теперь Chrome Android тоже!) прокручивает CSS-свойство, и расширенный тест на вывод браузера на рабочем столе (поддержка сенсорных событий не поддерживается с экраном шириной более 1200 пикселей)