Невозможно установить ширину webkit-scrollbar-thumb

Я пытаюсь создать пользовательскую полосу прокрутки, которая работает в Chrome и Safari. Ive попробовал следующий CSS:

::-webkit-scrollbar {
    width: 15px;
}

::-webkit-scrollbar-track {
    background-color: rgba(100, 100, 100, .5);
    width: 15px;
}

::-webkit-scrollbar-thumb {
    background-color: #818B99;
    border-radius: 9px;
    width: 9px;
}

Однако width на -webkit-scrollbar-thumb игнорируется. Я хотел бы, чтобы большой палец был тоньше, чем трек, как указано выше.

Похоже, я могу подделать ширину, установив границу на -webkit-scrollbar-thumb 3px с тем же цветом, что и трек, однако это работает только с непрозрачным цветом фона, и мне нужно, чтобы он работал с прозрачным цветом для дорожки, как указано выше.

Пример jsfiddle: http://jsfiddle.net/L6Uzu/1/

Ответ 1

Вы правы, что WebKit игнорирует объявление ширины на панели прокрутки. Он также игнорирует его на дорожке.

Проблема с использованием border заключается в том, что она рисует границу внутри большого пальца, поэтому, если вы просто сделаете цвет transparent, это не сработает.

Решение заключается в изменении места привязки фона. По умолчанию фон распространяется под границей, как уже упоминалось. Вы можете использовать свойство background-clip, чтобы изменить это, так что оно будет только расширяться до края поля заполнения. Тогда вам просто нужно сделать прозрачную границу 3px, а затем Боба вашему дяде:

::-webkit-scrollbar-thumb {
    background-color: #818B99;
    border: 3px solid transparent;
    border-radius: 9px;
    background-clip: content-box;
}

См. http://jsfiddle.net/L6Uzu/3/

Это корректно работает в Chrome, но Safari не имеет расширенной реализации радиуса радиуса, поэтому закругленные углы не видны.