Настройка цвета полосы прокрутки в Safari для Lion (OS X 10.7) - PullRequest
4 голосов
/ 28 июля 2011

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

Ответы [ 4 ]

4 голосов
/ 23 октября 2011

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 /

2 голосов
/ 13 июня 2012

Огромное спасибо @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-элемента, поэтому внизу просто белый цвет.Кроме того, многие свойства, такие как поля, отступы, непрозрачность и т. Д., Похоже, не работают, но вы можете добавить толстую рамку того же цвета, что и фон, чтобы дать большому пальцу место для дыхания.

2 голосов
/ 14 октября 2011

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

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

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

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

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

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

Screenshot of the CodePen in Safari

0 голосов
/ 12 августа 2011

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

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

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

...