Question

我有<div>元素，其高度固定且为overflow:auto。我想仅在内容足够大才能滚动时应用样式。示例：我想在可滚动时在框的底部应用插入框阴影，但是当内容不够大时，我不希望框阴影可见。

...最好不要使用脚本和尽可能跨浏览器。

更新

fiddle根据要求

由于

Answer 1

不幸的是......你不能（仅使用CSS / HTML）

（对不起）

然而，我知道您指定了您不想使用脚本，但它相对简单，例如使用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;
}

CSS样式仅适用于可滚动元素

1 个答案:

不幸的是......你不能（仅使用CSS / HTML）

Demo Fiddle