blocks|key|582242|text|不能将图像放入滚动条中。自定义滚动条不是W3C规范(IE仅限CSS)，但可以在此处找到有关可能的详细信息：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|582243|http://www.quirksmode.org/css/scrollbars.html|offset|length|582244|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|19|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

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:

<a href="http://www.quirksmode.org/css/scrollbars.html" rel="nofollow noreferrer">http://www.quirksmode.org/css/scrollbars.html</a>

blocks|key|3803174|text|不，你不能用图片代替滚动条。我还会提到，更改颜色对用户来说非常烦人，而且它只在IE中起作用，所以只要坚持使用标准的GUI元素即可。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3803175|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|582375|text|对于基于webkit的浏览器(对于“webkit”的一个足够新的值)，有一个propriety+CSS+properties集合。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|582376|entityMap|0|LINK|mutability|MUTABLE|url|http://webkit.org/blog/363/styling-scrollbars/^0|12|O|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

For webkit based browsers (for a sufficiently new value of "webkit") there are a collection of <a href="http://webkit.org/blog/363/styling-scrollbars/" rel="nofollow noreferrer">propriety CSS properties</a>.

blocks|key|582325|text|不，您不能使用滚动条中的图像。(此外，只有在非标准模式下的IE中才支持更改颜色。)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|582326|在滚动条中使用图像的唯一方法是根本不使用标准滚动条，而是自己使用DHTML实现替代滚动条，或者找到已经这样做的人。|582327|但是，在更改用户已经习惯的控件的外观时，您应该有一点限制。如果你一不小心，你可能会把人们搞糊涂，以至于他们根本认不出它是一个滚动条……|582328|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

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.)

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.

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...

blocks|key|1150898|text|据我所知，你不能设计一个带有图像的滚动条。如果你想使用jquery，你可以使用这个jquery插件轻松实现：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1150899|http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html|offset|length|1150900|这里的诀窍是使用一些div“模拟”滚动条，因为它们只是常规的div，所以您可以按任何方式设置样式。之后，只需使用scrollTop属性和滚动事件等就很容易了(但你不需要知道它是如何工作的)|1150901|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1Q|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

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:

<a href="http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html" rel="nofollow noreferrer">http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html</a>

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)

blocks|key|1150933|text|jScrollPane+(demo)|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1150934|或|1150935|Interface+(demo)。|1150936|两者都使用jQuery。|1150937|entityMap|0|LINK|mutability|MUTABLE|url|http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html|1|http://www.kelvinluck.com/assets/jquery/jScrollPane/examples.html|2|http://interface.eyecon.ro/|3|http://interface.eyecon.ro/demos/scrollbar.html^0|0|B|0|D|4|1|0|0|0|9|2|B|4|3|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]|$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|15|8|@]|9|@$A|16|B|17|1|18]|$A|19|B|1A|1|1B]]|C|$]]|$1|H|3|I|5|6|7|1C|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|1D|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]|R|$5|M|N|O|C|$P|S]]|T|$5|M|N|O|C|$P|U]]|V|$5|M|N|O|C|$P|W]]]]

<a href="http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html" rel="nofollow noreferrer">jScrollPane</a> (<a href="http://www.kelvinluck.com/assets/jquery/jScrollPane/examples.html" rel="nofollow noreferrer">demo</a>)

or

<a href="http://interface.eyecon.ro/" rel="nofollow noreferrer">Interface</a> (<a href="http://interface.eyecon.ro/demos/scrollbar.html" rel="nofollow noreferrer">demo</a>).

Both using jQuery.

blocks|key|3803302|text|对于MooTools，有MooScroller。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3803303|史蒂夫|3803304|entityMap|0|LINK|mutability|MUTABLE|url|http://www.mootools.net/|1|http://www.clientcide.com/wiki/cnet-libraries/08-layout/02-mooscroller^0|2|8|0|C|B|1|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]|$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

For <a href="http://www.mootools.net/" rel="nofollow noreferrer">MooTools</a>, there's <a href="http://www.clientcide.com/wiki/cnet-libraries/08-layout/02-mooscroller" rel="nofollow noreferrer">MooScroller</a>.

Steve

blocks|key|582412|text|Webkit+==+Safari和Chrome，但火狐和Opera计划在即将发布的版本中实现类似的功能。然而，规范是一个杀手，所以即使你有支持，它也不值得使用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|582413|Mootools有相当多的功能：|582414|582415|Mooscroller+(将在Mootools+-more中实现)、|ordered-list-item|offset|length|582416|MooScroll+(基于Solutaire's?)+|582417|UvumiScroll|582418|MochaUI's|582419|582420|我认为它是Ext的一部分，可能也是JQ的UI库的一部分，但在那里没有个人经验。|582421|一个非库相关的类：http://www.hesido.com/web.php?page=customscrollbar|582422|entityMap|0|LINK|mutability|MUTABLE|url|http://www.clientcide.com/wiki/cnet-libraries/08-layout/02-mooscroller|1|http://greengeckodesign.com/projects/mooscroll.aspx|2|http://solutoire.com/2008/03/10/mootools-css-styled-scrollbar/|3|http://tools.uvumi.com/scrollbar.html|4|http://greghoustondesign.com/examples/mootools/scrollbars/|5|http://www.hesido.com/web.php?page=customscrollbar^0|0|0|0|0|B|0|0|0|9|1|D|B|2|0|0|B|3|0|0|9|4|0|0|0|9|1E|5|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1D|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|1F|8|@]|9|@$H|1G|I|1H|1|1I]]|A|$]]|$1|J|3|K|5|G|7|1J|8|@]|9|@$H|1K|I|1L|1|1M]|$H|1N|I|1O|1|1P]]|A|$]]|$1|L|3|M|5|G|7|1Q|8|@]|9|@$H|1R|I|1S|1|1T]]|A|$]]|$1|N|3|O|5|G|7|1U|8|@]|9|@$H|1V|I|1W|1|1X]]|A|$]]|$1|P|3|-4|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|20|8|@]|9|@$H|21|I|22|1|23]]|A|$]]|$1|U|3|-4|5|6|7|24|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]|12|$5|X|Y|Z|A|$10|13]]|14|$5|X|Y|Z|A|$10|15]]|16|$5|X|Y|Z|A|$10|17]]|18|$5|X|Y|Z|A|$10|19]]|1A|$5|X|Y|Z|A|$10|1B]]]]

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.

Mootools has quite a few: 

<ol>
<li><a href="http://www.clientcide.com/wiki/cnet-libraries/08-layout/02-mooscroller" rel="nofollow noreferrer">Mooscroller</a> (will be
implemented into Mootools -more),</li>
<li><a href="http://greengeckodesign.com/projects/mooscroll.aspx" rel="nofollow noreferrer">MooScroll</a> (based on
<a href="http://solutoire.com/2008/03/10/mootools-css-styled-scrollbar/" rel="nofollow noreferrer">Solutaire's</a>?) </li>
<li><a href="http://tools.uvumi.com/scrollbar.html" rel="nofollow noreferrer">UvumiScroll</a></li>
<li><a href="http://greghoustondesign.com/examples/mootools/scrollbars/" rel="nofollow noreferrer">MochaUI's</a></li>
</ol>

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

One non-library dependent class: <a href="http://www.hesido.com/web.php?page=customscrollbar" rel="nofollow noreferrer">http://www.hesido.com/web.php?page=customscrollbar</a>

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

I have: 

<pre><code>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;
</code></pre>

Can I use an image to accomplish the same idea?

How can one use scroll bar images?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

如何使用HTML/CSS替换滚动条的图像？我有：scrollbar-base-color: #00acee;  scrollbar-dark-shadow-color: #00acee;  scrollbar-track-color: #ffffff;  scrollbar-face-color: #00acee;  scrollbar-shadow-color: #00acee;  scroll

问如何使用滚动条图像？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用滚动条图像？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用滚动条图像？
EN