CSS Style applied only on scrollable elements [duplicate]

Question

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

Answer 1

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