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 scrollbar 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.
We're at last getting a CSS solution to this in 2025 in the form of Container Scroll-state Queries. MDN will explain better than I can, but in short:
Set the element which overflows to be a container with the type scroll-state:
.container {
container-type: scroll-state;
container-name: my-container;
}
You can then use the container query to apply whatever css you want for whatever conditions you want. For example, setting the child to red when the container can be scrolled horizontally:
@container my-container scroll-state(scrollable: x) {
.child {
background-color: red;
}
}
For a full list of available scroll states, see here.
Note: Browser support for this is currently limited to Chrome and Edge only.
Full example below. Try changing the container height:
/* For appearances */
.container {
background-color: #ccc;
border-radius: 15px;
margin: 0 auto;
padding: 0 10px;
width: 100px;
height: 100px;
resize: vertical;
}
.child {
background-color: #dd2255;
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 20px;
margin: 10px 0;
}
/* Necessary for effect */
.container {
container-type: scroll-state;
container-name: my-container;
overflow-y: auto;
}
@container my-container scroll-state(scrollable: y) {
.child {
background-color: #5522dd;
}
}<div class="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
