CSS 和滚动条是怎么回事？答案

【问题标题】：What's the deal with CSS and scroll bars?CSS 和滚动条是怎么回事？
【发布时间】：2009-02-09 09:51:06
【问题描述】：

我有一个带有 HTML 页面的客户端，其中包含几个带有文本内容的滚动 div。她使用了大量基于图像的设计，因此默认滚动条根本不适合它。她想使用不同的风格，但据我所知这是不可能的。

你怎么看？

【问题讨论】：

标签： html css

【解决方案1】：

有一个 jQuery 答案 -

jScrollPane

有一些nice examples可以实现的效果

【讨论】：

使用 jScrollPane 唯一的坏处是您不能使用箭头键在内容区域内上下滚动，这会稍微降低可用性（尽管这可能使用另一个 jQuery 插件来实现)。
@Mun，此问题在项目的错误跟踪器中报告为错误。由于这个问题对我很重要，我计划在下周左右提交一个错误修复。
这是我采用的解决方案，我喜欢它的外观/功能。客户也很高兴，这更重要！
@Mun- 现在支持键盘导航

【解决方案2】：

从可用性的角度来看，更改滚动条是不行的。用户熟悉他/她的操作系统及其提供的视觉环境。改变这一点确实会造成混乱，尤其是那些不熟悉计算机的人、老年人等。

今天的大多数用户可能会认出滚动条，只要它具有基本形状 - 许多人甚至不会使用滚动条本身，而只会使用鼠标上的滚轮。

尽管如此，这仍然是一件值得考虑的事情。考虑你的听众。无论您做什么，如果您使用自定义滚动条，请确保它确实适用于所有平台/所有浏览器。

【讨论】：

【解决方案3】：

您可以使用 CSS 更改颜色，但 IIRC 只有 IE v5.5+ 支持此 CSS。其他浏览器没有！

查看这里的演示： http://www.iconico.com/CSSScrollbar/

【讨论】：

新的 Safari nightlys 支持这个.. 但不同的 CSS 属性 IIRC。

【解决方案4】：

有点可能。

body {
    scrollbar-face-color: #ffffff;
    scrollbar-highlight-color: #000000;
    scrollbar-shadow-color: #ffffff;
    scrollbar-3dlight-color: #ffffff;
    scrollbar-arrow-color: #000000;
    scrollbar-track-color: #808080;
    scrollbar-darkshadow-color: #000000;
}

注意:: 如果您指定了 XHTML Doctype，它可能不起作用！！

【讨论】：

在 XHTML 中工作正常。诀窍是，当您使用标准模式 DOCTYPE（无论您使用 HTML 还是 XHTML，都应该如此）时，IE 将视口的主滚动条放在上面的元素是“html”，而不是“body”。无论如何，只要设置“html”就可以了，因为这些属性会继承。