html - 仅应用于可滚动元素的 CSS 样式

标签 html css

<分区>

我有一个 <div>具有固定高度和 overflow:auto 的元素. 我只想在内容大到足以滚动时应用样式。示例:当它可滚动时,我想在框的底部应用一个嵌入框阴影,但是当内容不够大时,我不希望框阴影可见。

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

更新

fiddle根据要求

谢谢

最佳答案

不幸的是...你不能(仅使用 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;
}

关于html - 仅应用于可滚动元素的 CSS 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23629497/

相关文章:

html - 水平居中 2 Div |一个在另一个

javascript - 奇怪的导航突出显示

html - 只模糊一个巨大元素的背景

javascript - AngularJS 中带有 jQ​​uery 的动态选择框

HTML/CSS : "See Through Background" Text?

javascript - 淡入淡出页面 html 并使用数组脚本更改图像

css:要改变什么才能使尺寸更大?

html - 文本框 float

c# - 如何在C#中单击按钮并打开窗口发送电子邮件

css - SVG 线条动画在 Safari 中反转?