CSS Style applied only on scrollable elements
css, html
Solution
Unfortunately...you cant (using only CSS/HTML)
(sorry)
However, and I know you specified you don't want to use a script, but it is relatively straightforward, e.g. using jQuery:
Demo Fiddle
HTML
<div id="div1">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div id="div2"></div>
jQuery
$.fn.toggleScrollClass = function () {
this.each(function () {
$(this).toggleClass('hasScroll', this.scrollHeight > this.clientHeight);
});
}
$('div').toggleScrollClass();
CSS
div {
border: 1px solid black;
width: 100px;
height:100px;
overflow:auto;
}
.hasScroll {
border: 1px solid red;
}
Problem
I have a `<div>` element with a fixed height and `overflow:auto`. I want to apply a style only when the content is large enough for it to scroll. Example: I want to apply a inset box shadow to the bottom of the box when it is scrollable, but when the content is not large enough I don't want the box shadow to be visible. ...Preferably not using script and as cross-browser as possible. UPDATE fiddle as requested Thanks