检测是否移动浏览器支持溢出：滚动

是否有这一个简单的JavaScript的解决方案，可支持多种设备和图书馆不可知？检测是否移动浏览器支持溢出：滚动

我想添加一个类的HTML元素，所以我可以尽可能提供可滚动的容器移动。

这将是一个类似的方法即Modernizr的需要，检测功能的支持，而不是浏览器检测。我只是不想使用整个Modernizr框架。试图保持移动项目的JavaScript灯。

谢谢！

2012-03-15 ackernaut

请把一些精力放在你的问题， – Triode 2012-03-15 16:32:16

可能重复：http://stackoverflow.com/questions/3343311/can-javascript-detect-when-scrollbars-are-unavailable-ie-on-mobile-browsers。另请参阅：http://lostmonocle.com/post/870842095/geeky-stuff-using-jquery-to-check-if-scrollbars-are – Prescott 2012-03-15 16:39:12

我想更多的东西就是这样，但很难找到它：HTTP：/ /stackoverflow.com/questions/3911866/how-to-detect-lack-of-positionfixed-in-a-generic-way – ackernaut 2012-03-15 16:50:11

它并不完美，但我是用这个来检测-webkit-溢出滚动。

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

然后我说如果不是overflow-scrolling和移动然后我加载iScroll。

这意味着支持overflow: scroll但不支持-webkit-overflow-scrolling的设备仍然会加载iScroll，但这至少会为iOS 5和现代Android提供原生滚动功能。

来源

2012-06-02 11:50:05 respectTheCode

你可能想用下划线替换连字符？ – donquixote 2012-12-30 10:27:20

这会检查是否支持'-webkit-overflow-scrolling'，而不是在浏览器中是否存在overflow：scroll。 – speedarius 2013-11-15 23:11:32

@speedarius这就是第一句话所说的。 – respectTheCode 2013-11-18 15:19:19

下面是检查所有可能的选择，包括非供应商前缀的性质，并不会对像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());

来源

2012-11-07 16:21:41 Husky

这将检查浏览器是否支持' - * - overflow-scrolling'，它控制移动设备中的“动量”滚动。它不检查'overflow：scroll'是否在浏览器中工作。例如，在Android <3.0中，“overflow：scroll”根本不起作用。我相信这就是问题所在。 – speedarius 2013-11-15 23:14:35

这让我总是假的无处不在 – Gino 2014-02-25 15:38:33

这是一个非常好的问题。不幸的是，目前似乎没有办法可靠地检查overflow: scroll支持。

长丝组有这个，你可能想在你的项目（见http://filamentgroup.github.io/Overthrow/）使用填充工具，而是根据自己：

麻烦的是，这是很难 - 也许是不可能的 - 以测试溢出支持[...]

出于需要，推翻检查用户代理字符串添加到白名单中已知有本地溢出支持移动平台当前和未来的版本，而是通过更多的检查之前不可靠和不可知的手段，即： iOS5中的（！现在Chrome浏览器Android的太）触摸滚动CSS属性，和广阔的桌面浏览器的推理测试（不支持触摸事件大于1200像素宽屏幕）

来源

2013-08-26 13:37:00 Grodriguez

检测是否移动浏览器支持溢出：滚动

回答

相关问题