如何使用滚动条图像？答案

【问题标题】：How can one use scroll bar images?如何使用滚动条图像？
【发布时间】：2010-10-18 07:12:24
【问题描述】：

如何使用 HTML/CSS 替换滚动条的图像？

我有：

scrollbar-base-color: #00acee;  
scrollbar-dark-shadow-color: #00acee;  
scrollbar-track-color: #ffffff;  
scrollbar-face-color: #00acee;  
scrollbar-shadow-color: #00acee;  
scrollbar-highlight-color: #00acee;  
scrollbar-3d-light-color: #00acee;

我可以用一张图片来完成同样的想法吗？

【问题讨论】：

标签： javascript html css

【解决方案1】：

不，您不能使用图像代替滚动条。我还要提一下，更改颜色对用户来说非常烦人，而且它只能在 IE 中使用，所以请坚持使用标准的 GUI 元素。

【讨论】：

【解决方案2】：

据我所知，您无法使用图像设置滚动条的样式。如果你想使用 jquery，你可以很容易地使用这个 jquery 插件：

http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html

其中的诀窍是使用一些 div 来“模拟”滚动条，因为它们只是普通的 div，因此您可以随意设置样式。之后很容易使用 scrollTop 属性和滚动事件等（但你并不需要知道它是如何使用它的）

【讨论】：

【解决方案3】：

无法在滚动条内放置图像。自定义滚动条不是 W3C 规范（仅限 IE CSS），但可以在此处找到有关可能的详细信息：

http://www.quirksmode.org/css/scrollbars.html

【讨论】：

【解决方案4】：

jScrollPane (demo)

或

Interface (demo)。

两者都使用 jQuery。

【讨论】：

【解决方案5】：

对于MooTools，有MooScroller。

史蒂夫

【讨论】：

【解决方案6】：

不，您不能在滚动条中使用图像。（另外，即使在非标准模式下IE也支持改变颜色。）

在滚动条中使用图像的唯一方法是根本不使用标准滚动条，而是使用 DHTML 自己实现一个替换滚动条，或者找一个已经这样做的人。

但是，在更改用户已经习惯的控件外观时，您应该有所限制。如果你不小心，你最终可能会让人们感到困惑，以至于他们甚至根本不会将其识别为滚动条......

【讨论】：

+1 建议在改变用户期望时谨慎行事 - 根据我的经验，这从来都不是问题（毕竟向上/向下箭头等很容易破译），但这是一个很好的观点

【解决方案7】：

对于基于 webkit 的浏览器（对于足够新的“webkit”值），有一个 propriety CSS properties 的集合。

【讨论】：

【解决方案8】：

Webkit == Safari 和 Chrome，但 Firefox 和 Opera 计划在即将发布的版本中实现类似的功能。不过，该规范是一个杀手，因此即使您有支持，它也可能不值得使用。

Mootools 有不少：

Mooscroller（将是实施到 Mootools -更多），
MooScroll（基于 Solutaire's?)
UvumiScroll
MochaUI's

我想它是 Ext UI 的一部分，也可能是 JQ 的 UI 库，但没有个人经验。

一个非库依赖类：http://www.hesido.com/web.php?page=customscrollbar

【讨论】：