檢測是否移動瀏覽器支持溢出：滾動

是否有這一個簡單的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

檢測是否移動瀏覽器支持溢出：滾動

回答

相關問題