如何使用滚动条图像?

时间:2009-04-08 12:23:09

标签: javascript html css

如何使用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;

我可以使用图像来实现相同的想法吗?

8 个答案:

答案 0 :(得分:5)

不,您无法使用图像代替滚动条。我还要提到的是,改变颜色对用户来说非常烦人,它只能在IE中使用,所以只需坚持使用标准的GUI元素。

答案 1 :(得分:4)

对于基于webkit的浏览器(对于“webkit”的足够新值),有一组propriety CSS properties

答案 2 :(得分:3)

不,您无法在滚动条中使用图像。 (此外,即使在非标准模式下IE也支持更改颜色。)

在滚动条中使用图像的唯一方法是根本不使用标准滚动条,而是使用DHTML自己实现替换滚动条,或找到已经完成此操作的人。

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

答案 3 :(得分:1)

据我所知,你不能用带图像的滚动条样式。 如果你想使用jquery,可以使用这个jquery插件轻松完成:

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

诀窍是使用一些div来“模拟”滚动条,你可以按照自己想要的方式设置样式,因为它们只是普通的div。之后很容易使用scrollTop属性和滚动事件等(但你真的不需要知道如何使用它)

答案 4 :(得分:1)

无法在滚动条中放置图像。自定义滚动条不是W3C规范(仅限IE),但可以在此处找到可能的详细信息:

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

答案 5 :(得分:1)

jScrollPanedemo

Interfacedemo)。

两者都使用jQuery。

答案 6 :(得分:1)

对于MooTools,有MooScroller

史蒂夫

答案 7 :(得分:1)

Webkit == Safari和Chrome,但Firefox和Opera计划在即将发布的版本中实现类似功能。规范虽然是杀手,但即使你有支持也可能不值得使用。

Mootools有很多:

  1. Mooscroller(将会是 已实施到Mootools -more),
  2. MooScroll(基于 Solutaire's?)
  3. UvumiScroll
  4. MochaUI's
  5. 我认为它是Ext UI的一部分,可能是JQ的UI库,但在那里没有个人经验。

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