testing support for overflow-y:auto in browsers
cross-browser, css, javascript, jquery
Solution
Kind of an old question, but I thought I'd share my finds here, especially because the code sample given by Inkbug does not work as you would expect.
Overflow property support
`overflow-y` has been around since the CSS2.1 times (however it's been standardized pretty recently, in the css3 spec). For that reason, the support on desktop browsers is very decent.
Now, what you're asking here is whether or not the scrolling behavior actually works when we specify `overflow-y: scroll` on a particular element.
This behavior was introduced fairly recently in mobile browsers. More precisely, Apple introduced it in iOS 5 with a `-webkit` vendor prefix (see page 176 of Apple's documentation).
I can't find specific info for Android though.
What I can say about support for `overflow-scrolling` (vendor prefixed or not):
- latest nexus7 (Android 4.1.1): yes
- Android 2.3.x: no
- iOS >= 5: yes
- iOS < 5: no
Feature detection for scrolling-overflow
If you want to give scrolling behavior to an element, I would advise using feature detection.
Here's a gist showing how you can detect this `scrolling-overflow` property (it's been integrated in Modernizr since). If you don't want to use Modernizr, here is a simpler version that does pretty much the same:
/**
* Test to see if overflow-scrolling is enabled.
*/
var hasCSSProperty = function(prop) {
if (window.getComputedStyle) {
return window.getComputedStyle(document.body, null)[prop];
} else {
return document.body.currentStyle[prop];
}
};
var supportOverflowScrolling = function() {
if (hasCSSProperty('overflow-scrolling') ||
hasCSSProperty('-webkit-overflow-scrolling') ||
hasCSSProperty('-moz-overflow-scrolling') ||
hasCSSProperty('-o-overflow-scrolling')) {
return true;
} else {
return false
}
};
Problem
I want to test if a particular css property attribute is supported in the browser. For a css property, i can do it like ``` var overflowSupport = document.createElement("detect").style["overflow-y"] === "" ``` But what if i have to check for a particular class or attribute. For example, i want to test the support for ``` overflow-y:auto ``` and use it for scrolling a large div, where supported, and use iScroll at other places. How can i do that? Pls help.