Html 如何在 IE 中制作自定义滚动条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29698207/
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
How to make a custom scroll bars in IE?
提问by Prime
I have this nice scrollbar which is working in Chrome as well as in Safari latest versions. Is it possible to create the same kind of scrollbar for IE9+ using pure CSS?
我有这个漂亮的滚动条，它可以在 Chrome 以及 Safari 的最新版本中使用。是否可以使用纯 CSS 为 IE9+ 创建相同类型的滚动条？
CSS:
CSS：
.scrollbar
{
float: left;
height: 300px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.scrollbar-active
{
min-height: 450px;
}
#scroll::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#scroll::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#scroll::-webkit-scrollbar-thumb
{
background-color: #000000;
border: 2px solid #555555;
}
HTML:
HTML：
<div class="scrollbar" id="scroll">
<div class="scrollbar-active"></div>
</div>
回答by Ben Rondeau
These are the CSS properties you can use to adjust the style of IE scrollbars:
这些是可用于调整 IE 滚动条样式的 CSS 属性：
body{
scrollbar-base-color: #000;
scrollbar-face-color: #000;
scrollbar-3dlight-color: #000;
scrollbar-highlight-color: #000;
scrollbar-track-color: #000;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #000;
scrollbar-dark-shadow-color: #000;
}
More information can be found here.
可以在此处找到更多信息。
WORD OF CAUTION- Adjusting a native element of a web browser (like a scrollbar) can introduce all sorts of weird edge cases and user experience issues. Be careful with any adjustments you make, making sure the added benefit of custom scrollbars outweighs the issues it will present.
注意事项- 调整 Web 浏览器的本机元素（如滚动条）可能会引入各种奇怪的边缘情况和用户体验问题。小心您所做的任何调整，确保自定义滚动条的额外好处超过它会带来的问题。
回答by Alejandro Lasebnik
I've gone further and created a css only pure solution that not only provides a custom scrollbar for IE but also a custom seamlessly scrollbar that works in ALL BROWSERSgiving the same look and feel for all of them. Enjoy!
我更进一步，创建了一个纯 css 解决方案，它不仅为 IE 提供了自定义滚动条，还提供了一个自定义无缝滚动条，可以在所有浏览器中工作，为所有浏览器提供相同的外观和感觉。享受！
Description: It uses the webkit scrollbar css selectorfor Chrome Safari and Opera, the two (very old) simple scrollbar properties for firefox(introduced in version 64), and a media query trick to target ie (10, 11) and Edge in order to provide a mixing behavior that moves and hides part of the scrollbar width, top and bottom to provide the same look like in the other browsers.
描述：它使用Chrome Safari 和 Opera的webkit 滚动条 css 选择器、Firefox 的两个（非常旧的）简单滚动条属性（在版本 64 中引入），以及按顺序定位 ie (10, 11) 和 Edge 的媒体查询技巧提供移动和隐藏部分滚动条宽度、顶部和底部的混合行为，以提供与其他浏览器相同的外观。
Note: At this point you cannot provide standard css styling for scrollbar on Microsoft Edge (or colors), however it has a lot of votes and you can vote for this requirement as well.
注意：此时您无法为 Microsoft Edge 上的滚动条（或颜色）提供标准的 css 样式，但是它有很多投票，您也可以为此要求投票。
.scrollable {
background-color: #a3d5d3;
height: 100%;
overflow-y: auto;
}
.scrollable-container {
background-color: #a3d5d3;
width: 240px;
height: 160px;
position: relative;
overflow: hidden;
margin: auto;
margin-top: 16px;
}
.scrollable div {
font-size: 23px;
}
/*IE*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.scrollable {
margin-right: -10px;
padding-top: 32px;
margin-top: -32px;
margin-bottom: -32px;
padding-bottom: 32px;
/* ie scrollbar color properties */
scrollbar-base-color: #efefef;
scrollbar-face-color: #666666;
scrollbar-3dlight-color: #666666;
scrollbar-highlight-color: #666666;
scrollbar-track-color: #efefef;
scrollbar-arrow-color: #666666;
scrollbar-shadow-color: #666666;
scrollbar-dark-shadow-color: #666666;
}
.scrollable:after {
content: "";
height: 32px;
display: block;
}
}
/*Edge*/
@supports (-ms-ime-align:auto) {
.scrollable {
margin-right: -10px;
padding-top: 16px;
margin-top: -16px;
margin-bottom: -16px;
padding-bottom: 16px;
}
.scrollable:after {
content: "";
height: 16px;
display: block;
}
}
/*Firefox*/
/*From version 64 - https://drafts.csswg.org/css-scrollbars-1/*/
.scrollable {
scrollbar-width: thin;
scrollbar-color: #666666 #efefef;
}
/*Chrome*/
.scrollable::-webkit-scrollbar-track {
background-color: #efefef;
width: 4px;
}
.scrollable::-webkit-scrollbar-thumb {
background-color: #666666;
border: 1px solid transparent;
background-clip: content-box;
}
.scrollable::-webkit-scrollbar {
width: 8px;
}<div class="scrollable-container">
<div class="scrollable">
<div>Element 1</div>
<div>Element 2</div>
<div>Element 3</div>
<div>Element 4</div>
<div>Element 5</div>
<div>Element 6</div>
<div>Element 7</div>
<div>Element 8</div>
<div>Element 9</div>
</div>
</div>回答by Judy Engelsman
if you set all top area items to same color as the track it will - in essence - hide the arrow, but space will still be there.
如果您将所有顶部区域项目设置为与轨道相同的颜色，它实际上会隐藏箭头，但空间仍然存在。
scrollbar-track-color: #AAA;
scrollbar-3dlight-color: #AAA;
scrollbar-darkshadow-color: #AAA;
scrollbar-arrow-color: #AAA;
now if only you could adjust the width to make the scrollbar narrower!! has anyone figured this one out?
现在，如果您可以调整宽度以使滚动条变窄！有没有人想出这个？
