Question

无论如何都要控制div标签滚动条的样式？我在IE7和FireFox 3.5.2之间遇到了一些对比问题。任何帮助将不胜感激！

Answer 1

使用javascript可以设置滚动条的样式。这在IE和FF中都可以正常工作。

检查以下链接

From Twinhelix ， Example 2 ， Example 3 [或]您可以通过单击以下链接找到约30种类型的滚动样式类型 30 scrolling techniques

Answer 2

不，你不能在Firefox，Safari等中使用。你可以在Internet Explorer中使用。有几个脚本可以让你制作一个滚动条。

Answer 3

This one does well its scrolling job。它非常容易理解，只需要很少的代码行，编写得很好并且完全可读。

Answer 4

在网上看到我找到了一种设置滚动条样式的简单方法。

这是那家伙！ http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task

这是我的实施！ https://dl.dropbox.com/u/1471066/cloudBI/cssScrollbars.png

/* Turn on a 13x13 scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 13px;
}

::-webkit-scrollbar-button:vertical {
    background-color: silver;
    border: 1px solid gray;
}

/* Turn on single button up on top, and down on bottom */
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
    display: block;
}

/* Turn off the down area up on top, and up area on bottom */
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement {
    display: none;
}

/* Place The scroll down button at the bottom */
::-webkit-scrollbar-button:vertical:increment {
    display: none;
}

/* Place The scroll up button at the up */
::-webkit-scrollbar-button:vertical:decrement {
    display: none;
}

/* Place The scroll down button at the bottom */
::-webkit-scrollbar-button:horizontal:increment {
    display: none;
}

/* Place The scroll up button at the up */
::-webkit-scrollbar-button:horizontal:decrement {
    display: none;
}

::-webkit-scrollbar-track:vertical {
    background-color: blue;
    border: 1px dashed pink;
}

/* Top area above thumb and below up button */
::-webkit-scrollbar-track-piece:vertical:start {
    border: 0px;
}

/* Bottom area below thumb and down button */
::-webkit-scrollbar-track-piece:vertical:end {
    border: 0px;
}

/* Track below and above */
::-webkit-scrollbar-track-piece {
    background-color: silver;
}

/* The thumb itself */
::-webkit-scrollbar-thumb:vertical {
    height: 50px;
    background-color: gray;
}

/* The thumb itself */
::-webkit-scrollbar-thumb:horizontal {
    height: 50px;
    background-color: gray;
}

/* Corner */
::-webkit-scrollbar-corner:vertical {
    background-color: black;
}

/* Resizer */
::-webkit-scrollbar-resizer:vertical {
    background-color: gray;
}

Answer 5

还有iScroll项目，它允许您设置滚动条的样式，并让它与触摸设备一起使用。 http://cubiq.org/iscroll-4

Div Scrollbar - 任何风格的方式？

5 个答案: