css - targeting styles when overflow causing scrollbars_问答_开发者

css - targeting styles when overflow causing scrollbars

开发者 https://www.devze.com 2023-02-23 22:43 出处：网络

I have a div like this: <div id=\"test\"></div> #test { width:100px; overflow-y:auto; } What I want to do is apply styles only when the overflow-y:auto has actually caused a scro开发者

相关专题：css

I have a div like this:

<div id="test"></div>

#test {
  width:100px;
  overflow-y:auto;
}

What I want to do is apply styles only when the overflow-y:auto has actually caused a scro开发者_如何学Cllbar to appear. Is there a way to do this via CSS/CSS3?

Thank you.

No, CSS does not provide a way to apply styles based on other computed styles, as computed styles are up to the browser to settle. You'd have to do this with JavaScript instead, ~~if it's possible with it (I'm guessing it is somehow but it's not hitting at my mind now)~~ take a look at Joshua's answer.

By the way, the vertical scrollbar won't appear on your <div> unless you give it a height. Without defining a height it'll always expand to fit its content, obviating the need for a scrollbar.

As BoltClock said, there's no way to do this with just CSS. However, it is possible to do it if you're willing to use Javascript. Basically you want to style any overflowed element that has a scrollHeight greater than its clientHeight. Here's a simple example that runs a script when the page loads, and adds an "overflowed" class to the elements that have scrollbars:

<html><head><title>Overflow styling example</title>
<style type="text/css">
    div.outerdiv
    {
        width: 100px;
        height: 100px;
        overflow-y: auto;
        float: left;
        margin: 20px;
        border: 1px solid black;
    }

    div.outerdiv.overflowed
    {
        background-color: #9999FF
    }

</style>
<script type="text/javascript">
    function crossBrowserEventAttach(objectRef, eventName, functionRef)
    {
        try {
            objectRef.addEventListener(eventName, functionRef, false);
        }
        catch(err) {
            try {
                objectRef.attachEvent("on" + eventName, functionRef);
            }
            catch(err2) {
                // event attachment failed
            }
        }
    }

    function overflowCheck(element) {

        if (element.scrollHeight > element.clientHeight && element.className.indexOf("overflowed") < 0) {
            element.className = element.className + " overflowed";
        }
        else if (element.className.indexOf("overflowed") >= 0) {
            element.className = element.className.replace(" overflowed", "");
        }
    }

    function checkPage() {
        var elements = document.getElementsByTagName("div");
        for (var i = 0; i < elements.length; i++) {
            if (elements[i].className.indexOf("outerdiv") >= 0) {
                overflowCheck(elements[i]);
            }
        }
    }

    crossBrowserEventAttach(window, "load", checkPage);
</script>
</head>
<body>

<div class="outerdiv">
    Line 1<br />Line 2
</div>

<div class="outerdiv">
    Line 1<br />Line 2<br />Line 3<br />Line 4<br />Line 5<br />Line 6<br />Line 7<br />Line 8<br />Line 9<br />Line 10<br />Line 11<br />Line 12<br />
</div>

<div class="outerdiv">
    Line 1<br />Line 2<br />Line 3<br />
</div>

<div class="outerdiv">
    Line 1<br />Line 2<br />Line 3<br />Line 4<br />Line 5<br />Line 6<br />Line 7<br />Line 8<br />Line 9<br />Line 10<br />Line 11<br />Line 12<br />
</div>

</body>
</html>

If you run this in your browser, the divs with content tall enough to give them scrollbars should be blue, and the ones without scrollbars should be white:

http://i51.tinypic.com/2zf96de.png

Note that if you use this technique with a page that modifies the DOM or otherwise has content that changes after it loads, you'll need to write additional event handlers to re-check the elements after their contents have changed.

No, you will have to manually calculate the available height of the containing div and the actual height of the element in question.

var containerHeight = $(container).height();
var elemHeight = $(elem).height();

var elemTop = $(elem).offset().top;
var elemBottom = elemTop + elemHeight;

the two case you need to check are
1. elemHeight > containerHeight 
2. elemBottom > containerHeight

If either of these is true, a vertical scrollbar should have appeared if the overflow property for the container has been set correctly.

Do excuse me if the above code is not exact since I cannot test it right now.