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

Question

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

Answer 1

Krinkle * Исправление ( или подобное ), вероятно, является лучшим, но для любопытных, возможно несколько стилизовать полосу прокрутки в 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

Огромное спасибо @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 3

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

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

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

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

.. вызовет белую полосу прокрутки (так как фон тела черный), однако поверхность, на которой плавает полоса прокрутки (правая сторона элемента html), белая, поэтомуоно белое на белом (с очень тонкой серой каймой).

См. https://codepen.io/Krinkle/full/aPZNXp в Safari.

Answer 4

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

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

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