Настройка цвета полосы прокрутки в Safari для Lion (OS X 10.7)

Question

Кажется, что новые полосы прокрутки в Lion корректируют свой цвет в Safari в зависимости от цвета фона элемента body. Есть ли способ вручную установить, должна ли полоса прокрутки быть темной или светлой? Я знаю, что есть CSS-опции webkit для стилизации полосы прокрутки, которая на самом деле предшествовала новым полосам прокрутки Lion. Моя единственная проблема с использованием этого метода состоит в том, что панель больше не функционирует как настоящая львиная, которая исчезает после остановки прокрутки. Хотя я полагаю, что это может быть достигнуто с помощью CSS-анимации и JavaScript для распознавания начала и конца прокрутки, было бы неплохо просто использовать настоящую полосу прокрутки без всякой "хакерской атаки".

Answer 1

Исправление Кринкл( или подобное), вероятно, является лучшим, но для любопытных, возможно, есть возможность стилизовать полосу прокрутки в Lion, хотя это чрезвычайно раздражает. Вот основная идея:

html {
  overflow: auto;
}

body {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  overflow-y: scroll;
  overflow-x: hidden;
}

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

::-webkit-scrollbar-track {
  visibility: hidden; /* doesn't seem to work */
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(0,0,0,0.5);
}

::-webkit-scrollbar:window-inactive {
    visibility: hidden;
}

Это мое самое близкое приближение к темной полосе прокрутки Льва по умолчанию. Вот откуда я все это взял: http://css-tricks.com/9130-custom-scrollbars-in-webkit/

Answer 2

Из тестирования на Safari/Chrome кажется, что он наблюдает цвет фона элемента body и только элемента body. Сама по себе область, которая визуально находится ниже полосы прокрутки.

Поэтому, когда ваша страница имеет темный фоновый цвет тела, она автоматически покажет более яркую, контрастную полосу прокрутки.

Например следующее:

html {
    background: white;
}
body {
    width: 50%;
    background: black;
}

вызовет белую полосу прокрутки (так как фон тела черный), однако поверхность, на которой плавает полоса прокрутки (правая сторона элемента html), белая, поэтому она белая на белом (с очень серой рамкой серого цвета). http://jsbin.com/oquduj/

Answer 3

Огромное спасибо @EdwardLoveall за его ответ и соответствующую ссылку. Это мой вариант его подхода к использованию полосы прокрутки в стиле iOS (я использую Lion + Chrome 19).

::-webkit-scrollbar {
    background-color: black;
    width: 1.25em /* 20px / 16px */;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.33333);
    border: 0.25em /* 4px / 16px */ solid black;
    border-radius: 1.25em /* 20px / 16px */;
}

Как он отметил, вы не можете спрятать трек, но вы можете только фон. Делать фон прозрачным тоже не получается, потому что он находится вне HTML-элемента, поэтому внизу просто белый цвет. Кроме того, многие свойства, такие как поля, отступы, непрозрачность и т. Д., Похоже, не работают, но вы можете добавить толстую рамку того же цвета, что и фон, чтобы дать большому пространству для дыхания.

Answer 4

Единственный способ - установить светлый / темный фон в html/body поэтому полоса прокрутки будет иметь противоположный цвет, и после этого добавьте желаемый фон в оболочку.

html,body {
    height: 100%;
    background: #000;
}
.wrap {
    height: 100%;
    background: #FFF;
}

height: 100%; предназначены для растягивания обертки, когда есть немного контента.