如何在 IE 中制作自定义滚动条？

Posted 2023-03-05

【中文标题】如何在 IE 中制作自定义滚动条？

【英文标题】：How to make a custom scroll bars in IE?

【发布时间】：2015-06-24 05:54:24

【问题描述】：

我有一个很好的滚动条，它可以在 Chrome 和 Safari 最新版本中使用。是否可以使用纯 CSS 为 IE9+ 创建相同类型的滚动条？

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：

<div class="scrollbar" id="scroll">
    <div class="scrollbar-active"></div>
</div>

演示：https://jsfiddle.net/7gmut6w3/2/

【参考方案1】：

这些是您可以用来调整 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;

更多信息可以在here找到。

注意事项 - 调整网络浏览器的原生元素（如滚动条）可能会引入各种奇怪的边缘情况和用户体验问题。请小心您所做的任何调整，确保自定义滚动条带来的额外好处超过它所带来的问题。

【讨论】：

只是为了向其他人指出——看起来仍然无法自定义 IE 滚动条的曲线/边框。或者去掉顶部和底部的箭头。

... 或独立于滑块颜色更改拇指颜色。

我是斗鸡眼，还是前两个属性相同？

他的意思是base-color和face-color，指的是同一个东西，但在不同的IE版本中使用。

更新为 face-color

【参考方案2】：

如果您将所有顶部区域的项目设置为与轨道相同的颜色，它将 - 实质上 - 隐藏箭头，但空间仍然存在。

scrollbar-track-color:  #AAA;
scrollbar-3dlight-color:  #AAA;
scrollbar-darkshadow-color:  #AAA;
scrollbar-arrow-color:  #AAA;

现在只要您可以调整宽度以使滚动条更窄！有人想出这个吗？

【讨论】：

这是隐藏丑陋的 Windows 8 滚动条箭头的绝佳解决方案，无需从头开始编写滚动条代码。感谢分享

【参考方案3】：

我更进一步，创建了一个纯 css 解决方案，它不仅为 IE 提供了自定义滚动条，而且还提供了一个可在 所有浏览器 中使用的自定义无缝滚动条，为所有浏览器提供相同的外观和感觉其中。享受吧！

说明：Chrome Safari 和 Opera 使用 webkit scrollbar css selector， 两个（非常老的）simple scrollbar properties for firefox（在版本 64 中引入），以及一个针对 ie (10, 11) 和 Edge 的媒体查询技巧，以提供移动和隐藏部分滚动条宽度、顶部和底部提供与其他浏览器相同的外观。

注意：此时您无法为 Microsoft Edge 上的滚动条（或颜色）提供标准 css 样式，但是它有很多投票，您可以vote for this requirement as well。

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

【讨论】：

我们可以像 Mac 滚动条那样在滚动条上设置圆边吗？

这是完美的答案。这是一个相当新的答案，这就是为什么低投票！当我们努力使用 IE 滚动条做某事时，这节省了我的时间。

只有一件事，padding-bottom 使用的东西对我不起作用，所以使用以下：.scrollable>*:last-child padding-bottom: 20px;