Html CSS样式仅应用于可滚动元素

我有一个固定高度的

元素和

溢出：auto

。 我只想在内容足够大可以滚动时应用样式。示例：当框可滚动时，我想在框的底部应用一个插入框阴影，但当内容不够大时，我不希望框阴影可见

…最好不要使用脚本，并尽可能跨浏览器

更新

应要求

谢谢

不幸的是……你不能（只使用CSS/HTML） （对不起）

但是，我知道您指定了不想使用脚本，但它相对简单，例如使用jQuery：

HTML

CSS

---

我很确定你不能用纯css来做这件事。也许这是可能的，但这是一个间接的脚本。这很容易用jQuery实现。也许你可以用你的div向我们展示你的标记，或者创建一个@arkoelsnaar谢谢，如果没有人给出不同的答案，我可以用jQuery来实现。@caramba:Fiddle添加了。但是你可以在stackoverflow.com上找到许多使用脚本检测滚动的例子，比如，不仅仅是感谢。我想这应该是公认的答案，因为这是最好的选择。这对多个元素同时起作用吗？与

$（'.funkybox'）.toggleScrollClass（）一样它似乎在根据第一个元素的可滚动值更改所有元素。@hofnarwillie-很容易修复：谢谢！请告诉我
间隔
参数的用途是什么？
<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>

$.fn.toggleScrollClass = function () {
    this.each(function () {
        $(this).toggleClass('hasScroll', this.scrollHeight > this.clientHeight);
    });
}
$('div').toggleScrollClass();

div {
    border: 1px solid black;
    width: 100px;
    height:100px;
    overflow:auto;
}
.hasScroll {
    border: 1px solid red;
}