Internet Explorer 8 到 11 中的滾動條按鈕大小

Question

我有一個非常小的可滾動表格，它在較舊的 IE 中顯示滾動按鈕和滾動條就好了，但是 IE11 有問題，因為向上/向下按鈕太大以至於它們以某種方式重疊，用戶甚至無法按下“向下” " 按鈕更不用說抓住滾動指示器 - 它甚至不可見。 滾動的唯一選項是通過鼠標滾動條或鍵盤按鈕。

這是問題的樣子（IE 8、IE 9、IE 11）：

無論如何，我可以通過 css/html/JavaScript 影響 IE 中的滾動條按鈕大小嗎？ 用戶是否可以更改自己的內容（除了不使用 IE11）？ 我是否必須重新設計頁面的這一部分以使其更大？

Answer 1

您可能想要使用： nanoscroller ，盡管為了獲得最佳可用性，我建議您將頁面高度設置得更大

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