Question

我有这样的div：

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

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

我想要做的是仅在overflow-y：auto实际导致滚动条出现时才应用样式。有没有办法通过CSS / CSS3来做到这一点？

谢谢。

Answer 1

不，CSS没有提供基于其他计算样式应用样式的方法，因为计算出的样式由浏览器决定。你必须用JavaScript来做这件事，~~如果有可能的话（我猜它是某种方式，但现在不是我的想法）~~看看Joshua's answer。

顺便说一句，垂直滚动条不会显示在<div>上，除非你给它一个高度。如果没有定义高度，它将始终扩展以适应其内容，从而无需使用滚动条。

Answer 2

正如BoltClock所说，只有CSS才能做到这一点。但是，如果您愿意使用Javascript，则可以执行此操作。基本上，您希望设置任何溢出元素的样式，其scrollHeight大于clientHeight。这是一个在页面加载时运行脚本的简单示例，并向具有滚动条的元素添加“溢出”类：

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

如果你在浏览器中运行它，内容高到足以给它们滚动条的div应该是蓝色的，没有滚动条的div应该是白色的：

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

请注意，如果您将此技术用于修改DOM的页面或在加载后具有更改内容的页面，则需要编写其他事件处理程序以在内容更改后重新检查元素。

Answer 3

不，您必须手动计算包含div的可用高度以及相关元素的实际高度。

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

如果其中任何一个为真，则如果已正确设置容器的overflow属性，则应显示垂直滚动条。

如果上述代码不准确，请原谅我，因为我现在无法测试。

css - 溢出导致滚动条时的目标样式

3 个答案: