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

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

css

css-溢出导致滚动条时的目标样式,css,Css,我有一个这样的部门： <div id="test"></div> #test { width:100px; overflow-y:auto; } #试验{ 宽度：100px；溢出y：自动； } 我想做的是仅当overflow-y:auto实际导致出现滚动条时才应用样式。有没有办法通过CSS/CSS3实现这一点谢谢。不，CSS不提供基于其他计算样式应用样式的方法，因为计算样式由浏览器决定。你必须用JavaScript来做这件事，如果有可能的话（我猜这是某

我有一个这样的部门：

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

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


#试验{
宽度：100px；
溢出y：自动；
}

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

谢谢。

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

顺便说一下，垂直滚动条不会出现在

上，除非您给它一个高度。如果不定义高度，它将始终展开以适合其内容，从而无需滚动条。

否，CSS不提供基于其他计算样式应用样式的方法，因为计算样式由浏览器决定。你必须用JavaScript来做这件事，如果有可能的话（我猜这是某种原因，但它现在并没有击中我的头脑），看看

顺便说一下，垂直滚动条不会出现在

上，除非您给它一个高度。如果不定义高度，它将始终展开以适合其内容，从而无需滚动条。

否，您必须手动计算包含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

属性设置正确，则应显示垂直滚动条

如果上面的代码不准确，请原谅，因为我现在无法对其进行测试。

否，您必须手动计算包含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

属性设置正确，则应显示垂直滚动条

如果上面的代码不准确，请原谅，因为我现在无法对其进行测试。

正如BoltClock所说，仅使用CSS无法做到这一点。但是，如果您愿意使用Javascript，就可以这样做。基本上，您希望设置任何溢出元素的样式，该元素的

滚动高度

大于其

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>

溢出样式示例
室外分区
{
宽度：100px；
高度：100px；
溢出y：自动；
浮动：左；
利润率：20px；
边框：1px纯黑；
}
舱外溢
{
背景色：#9999FF
}
函数crossBrowserEventAttach（objectRef、eventName、functionRef）
{
试一试{
objectRef.addEventListener（eventName、functionRef、false）；
}
捕捉（错误）{
试一试{
objectRef.attachEvent（“on”+eventName，functionRef）；
}
捕获（错误2）{
//事件附件失败
}
}
}
函数溢出检查（元素）{
if（element.scrollHeight>element.clientHeight&&element.className.indexOf（“溢出”）<0）{
element.className=element.className+“溢出”；
}
else if（element.className.indexOf（“溢出”）>=0）{
element.className=element.className.replace（“溢出”和“”）；
}
}
函数检查页（）{
var elements=document.getElementsByTagName（“div”）；
对于（var i=0；i=0）{
溢出检查（元素[i]）；
}
}
}
交叉浏览事件附加（窗口“加载”，检查页面）；
第1行
第2行
第1行
第2行
第3行
第4行
第6行
第7行
第8行
第9行
第10行
第11行
第12行

第1行
第2行
第3行

第1行
第2行
第3行
第4行
第6行
第7行
第8行
第9行
第10行
第11行
第12行

如果在浏览器中运行此功能，则内容高度足以显示滚动条的div应为蓝色，没有滚动条的div应为白色：

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

正如BoltClock所说，仅使用CSS无法做到这一点。但是，如果您愿意使用Javascript，就可以这样做。基本上，您希望设置任何溢出元素的样式，该元素的

滚动高度

大于其

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>

溢出样式示例
室外分区
{
宽度：100px；
高度：100px；
溢出y：自动；
浮动：左；
利润率：20px；
边框：1px纯黑；
}
舱外溢
{
背景色：#9999FF
}
函数crossBrowserEventAttach（objectRef、eventName、functionRef）
{
试一试{
objectRef.addEventListener（eventName、functionRef、false）；
}
捕捉（错误）{
试一试{
objectRef.attachEvent（“on”+eventName，functionRef）；
}
捕获（错误2）{
//事件附件失败
}
}
}
函数溢出检查（元素）{
if（element.scrollHeight>element.clientHeight&&element.className.indexOf（“溢出”）<0）{
element.className=element.className+“溢出”；
}
else if（element.className.indexOf（“o