Как создать пользовательские полосы прокрутки в IE?

У меня есть эта прекрасная полоса прокрутки, которая работает как в Chrome, так и в последних версиях Safari. Можно ли создать такую же полосу прокрутки для 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:

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

DEMO: https://jsfiddle.net/7gmut6w3/2/

Ответы

Ответ 1

Это свойства CSS, которые вы можете использовать для настройки стиля полос прокрутки IE:

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.

СЛОВО ПРЕДОСТЕРЕЖЕНИЯ - Настройка собственного элемента веб-браузера (например, полосы прокрутки) может привести к возникновению всевозможных странных крайних случаев и проблем с пользовательским интерфейсом. Будьте осторожны с любыми изменениями, которые вы вносите, следя за тем, чтобы дополнительное преимущество пользовательских полос прокрутки перевешивало проблемы, которые будут возникать.

Ответ 2

если вы установите все элементы верхней области того же цвета, что и трек, который он будет - по сути - спрячьте стрелку, но пространство все равно будет там.

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

теперь, если бы вы могли регулировать ширину, чтобы сделать полосу прокрутки более узкой! кто-нибудь понял это?

Ответ 3

Я пошел дальше и создал чистое решение css only, которое предоставляет не только настраиваемую полосу прокрутки для IE, но и настраиваемую плавную полосу прокрутки, которая работает в ALL BROWSERS, предоставляя одинаковый внешний вид для всех из них. Наслаждайтесь!

Описание: он использует селектор css для полосы прокрутки webkit для Chrome Safari и Opera, два (очень старых) простых свойства полосы прокрутки для Firefox (появившиеся в версии 64) и трюк с медиа-запросом для целевого назначения, т.е. (10, 11) и Edge, чтобы обеспечить смешанное поведение, которое перемещает и скрывает часть ширины полосы прокрутки, сверху и снизу, чтобы обеспечить такой же внешний вид, как в других браузерах.

Примечание. На данный момент вы не можете предоставить стандартный стиль CSS для полосы прокрутки в Microsoft Edge (или цветах), однако у нее много голосов, и вы можете голосовать за это требование.

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