Internet Explorer 8 到 11 中的滚动条按钮大小答案

【问题标题】：Scrollbar button size in internet explorer 8 to 11Internet Explorer 8 到 11 中的滚动条按钮大小
【发布时间】：2015-01-15 14:12:41
【问题描述】：

我有一个非常小的可滚动表格，它在旧版 IE 中显示滚动按钮和滚动条很好，但 IE11 存在问题，因为向上/向下按钮太大以至于它们以某种方式重叠，用户甚至无法按下“向下”按钮更不用说抓住滚动指示器了——它甚至不可见。滚动的唯一选项是通过鼠标滚轮或键盘按钮。

这是问题的样子（IE 8、IE 9、IE 11）：

我是否可以通过 css/html/JavaScript 影响 IE 中的滚动条按钮大小？用户是否可以自行更改某些内容（除了不使用 IE11）？我是否必须重新设计页面的这一部分以使其更大？

【问题讨论】：

标签： javascript html css internet-explorer

【解决方案1】：

您可能希望使用：nanoscroller，但为了获得最佳可用性，我建议您将页面高度调大

【讨论】：

这正是我解决问题的方法，我重新调整了页面的布局并将可滚动的表格设置得更高。

【解决方案2】：

您可以编辑滚动条并改进 UI 设计以提高可用性。此方法也适用于设计滚动条的表格，支持所有浏览器。

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

【讨论】：