如何使用滚动条图像？

How can I replace the scrollbar's images using HTML/CSS?

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

I have:

我有：

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;

Can I use an image to accomplish the same idea?

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

8 个解决方案

#1

It is not possible to put an image inside the scrollbar. Customizing the scrollbar is not a W3C spec (IE only CSS), but details on what is possible can be found here:

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

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

#2

No you can't use images in place of the scroll bar. I'll also just mention that changing the colours is very annoying to users and it only works in IE anyway, so just stick with the standard GUI elements.

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

#3

For webkit based browsers (for a sufficiently new value of "webkit") there are a collection of propriety CSS properties.

对于基于webkit的浏览器（对于“webkit”的足够新值），有一组适当的CSS属性。

#4

No, you can't use an image in the scroll bar. (Also, even changing the color is only supported in IE in non-standard mode.)

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

The only way to use images in a scroll bar would be not to use the standard scroll bar at all, but implement a replacement scroll bar yourself using DHTML, or find someone who has done that already.

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

However, you should be a bit restrictive when changing the look of controls that the users are already used to. If you are not careful you may end up confusing people so that they don't even recognise it as a scroll bar at all...

但是，在更改用户已经习惯的控件外观时，您应该有点限制。如果你不小心你可能会让人混淆，以至于他们甚至根本不认识它作为滚动条......

#5

as far as i know you cant style a scroll bar with an image. if you want to use jquery, you can do so easily using this jquery plugin:

据我所知，你无法设置带图像的滚动条。如果你想使用jquery，你可以使用这个jquery插件轻松完成：

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

The trick there is to "simulate" a scroll bar using some divs, which you can style any way you want, since they are just regular divs. After that its easy to just use the scrollTop property and scroll events etc (but you dont really need to know how it works to use it)

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

#6

For MooTools, there's MooScroller.

对于MooTools，有MooScroller。

Steve

史蒂夫

#7

jScrollPane (demo)

jScrollPane（演示）

要么

Interface (demo).

界面（演示）。

Both using jQuery.

两者都使用jQuery。

#8

Webkit == Safari and Chrome, but Firefox and Opera have plans to implement similar in upcoming releases. The spec is a killer though, so it may not be worth using even if you have the support.

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

Mootools has quite a few:

Mootools有很多：

Mooscroller (will be implemented into Mootools -more),
Mooscroller（将在Mootools中实施 - 更多），
MooScroll (based on Solutaire's?)
MooScroll（基于Solutaire的？）
UvumiScroll
UvumiScroll
MochaUI's
MochaUI的

I imagine it is part of Ext UI, and probably JQ's UI library, but have no personal experience there.

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

One non-library dependent class: http://www.hesido.com/web.php?page=customscrollbar

一个非库依赖类：http：//www.hesido.com/web.php？page = customcrollbar

#1