css-溢出导致滚动条时的定位样式

问题描述

| 我有这样的股利：

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

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

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

解决方法

正如BoltClock所说，仅CSS就无法做到这一点。但是，如果您愿意使用Javascript，则可以这样做。基本上，您想为任何溢出的元素加上ѭ1大于其clientHeight的样式。这是一个简单的示例，该示例在页面加载时运行脚本，并向具有滚动条的元素添加\“ overflowed \”类：

<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的页面一起使用，或者在加载后具有更改的内容，则需要编写其他事件处理程序以在元素的内容更改后重新检查元素。 ,不可以，CSS没有提供基于其他计算样式应用样式的方法，因为计算样式取决于浏览器来确定。如果可能，您必须使用JavaScript代替（我想是可以的，但现在还没想到），看看Joshua的答案。顺便说一句，除非您指定高度，否则垂直滚动条不会显示在<div>上。如果不定义高度，它将始终扩展以适合其内容，从而无需滚动条。 ,不，您将必须手动计算包含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-定位定位导致导致条时样式样式样式溢出溢出溢出滚动滚动滚动