Html Div Scrollbar - 任何方式来设计它？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1256258/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Div Scrollbar - Any way to style it?
提问by Dan Appleyard
Is there anyway to control the styling of the scrollbars of a div tag? I am experiencing some contrast issues between IE7 and FireFox 3.5.2. Any help would be greatly appreciated!
有没有办法控制 div 标签滚动条的样式？我在 IE7 和 FireFox 3.5.2 之间遇到了一些对比度问题。任何帮助将不胜感激！
回答by Logesh Paul
Using javascript you can style the scroll bars. Which works fine in IE as well as FF.
使用 javascript 您可以设置滚动条的样式。在 IE 和 FF 中都可以正常工作。
Check the below links
检查以下链接
From Twinhelix, Example 2, Example 3[or] you can find some 30 type of scroll style types by click the below link 30 scrolling techniques
从 Twinhelix, Example 2, Example 3[或] 您可以通过单击下面的链接找到大约 30 种滚动样式类型 30 种滚动技术
回答by Daniel A. White
No, you can't in Firefox, Safari, etc. You can in Internet Explorer. There are several scripts out there that will allow you to make a scroll bar.
不，您不能在 Firefox、Safari 等中。您可以在 Internet Explorer 中。有几个脚本可以让您制作滚动条。
回答by Marco Demaio
This one does well its scrolling job. It's very easy to understand, just really few lines of code, well written and totally readable.
这一项做得很好，它的滚动工作。它很容易理解，只有几行代码，写得很好，完全可读。
回答by Rodrigo Moraes
Looking at the web I find some simple way to style scrollbars.
查看网络，我找到了一些简单的方法来设置滚动条的样式。
This is THE guy! http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task
这就是那个家伙！ http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task
And here my implementation! https://dl.dropbox.com/u/1471066/cloudBI/cssScrollbars.png
这里是我的实现！ 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;
}
回答by rmarscher
There's also the iScroll project which allows you to style the scrollbars plus get it to work with touch devices. http://cubiq.org/iscroll-4
还有 iScroll 项目，它允许您设置滚动条的样式并使其与触摸设备一起使用。 http://cubiq.org/iscroll-4
