【问题标题】: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 有不少:

                1. Mooscroller(将是 实施到 Mootools -更多),
                2. MooScroll(基于 Solutaire's?)
                3. UvumiScroll
                4. MochaUI's

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

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

                【讨论】:

                  猜你喜欢
                  • 1970-01-01
                  • 1970-01-01
                  • 2014-05-05
                  • 2010-11-20
                  • 1970-01-01
                  • 1970-01-01
                  • 2012-08-02
                  • 1970-01-01
                  • 2012-06-28
                  相关资源
                  最近更新 更多