javascript - testing support for overflow-y:auto inbrowsers - Stack Overflow

admin管理员组

文章数量:1391987

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.

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.

• javascript
• jquery
• css
• cross-browser

Share Improve this question Follow edited May 4, 2012 at 10:56 ghostCoder asked May 4, 2012 at 10:12 ghostCoderghostCoder 7,67599 gold badges5353 silver badges7575 bronze badges 4

• Are there any 'modern' browsers which don't support it? – PeeHaa Commented May 4, 2012 at 10:18
• overflow is supported in all browsers as part of CSS2 - do you specifically mean overflow-x and overflow-y? You should edit the title if so. – Rory McCrossan Commented May 4, 2012 at 10:21
• 1 overflow-y:auto is not supported in kindle browsers which have android 2.3.3 at their base. – ghostCoder Commented May 4, 2012 at 10:24
• @ghostCoder Thanks. Didn't know that. Something to keep in mind. – PeeHaa Commented May 4, 2012 at 11:17

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

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
    }
};

When one assigns an invalid value to a dom style, it gets rejected. Therefore this should work:

var testOverflowEl = document.createElement( "x-test" );
testOverflowEl.style.overflowY = "auto";
var overflowSupport = testOverflowEl.style.overflowY === "auto";

Arnaud Brosseau's reply surely deserves the checkmark.

Anyway, consider also using Modernizr.

Using their addTest and testAllProps API functions, you can easily check for any css property support:

Modernizr.addTest('overflow-y',function(){
    return Modernizr.testAllProps('overflowY'); /* camel case here */
});

Then you can check it with JavaScript:

if(Modernizr.overflowY){
    /* do something if supported */
}

but it will also add a class to the <html> tag, so that you can custom rules on CSS too:

.overflowY #element {
    /* style for browsers supporting overflow-y */
}
.no-overflowY #element {
    /* style for browsers NOT supporting overflow-y */
}

本文标签： javascripttesting support for overflowyauto inbrowsersStack Overflow