scrollbar-highlight-color в CSS

Содержание

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 53407ad42f428e47 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

FPublisher

Web-технологии: База знаний

Разукрашиваем scrollbar средствами CSS

В некоторых случаях можно пожертвовать привычным видом элементов управления и немного оживить интерфейс своими собственными стилями. Сегодня мы поговорим о полосах прокрутки (scrollbar), а точнее о том, как изменить их вид с помощью CSS.

CSS свойства scrollbar

С самого начала хочу отметить, что описываемые ниже CSS свойства являются расширением спецификации CSS2, введенным компаний Microsoft, реализованным начиная с IE 5.5

Полоса прокрутки состоит из фона, ползунока и концевых кнопок со стрелками.

Кнопки могут быть как активными так и нет. Если скроллбар неактивен, то ползунок отсутсвует.

Самый простой способ изменить полосу прокрутки это задать свойство scrollbar-base-color. Это свойство задает основной цвет полосы прокрутки. Если не определены другие свойства полосы прокрутки, то бегунок и кнопки прокрутки будут отображаться определенным вами цветом с применением трехмерных эффектов. Фон полосы прокрутки будет отображаться тоже этим цветом, но только осветленным.

Например, scrollbar-base-color:lime приведет к результат представленому на рисунке ниже.

Конечно можно делать более тонкие настройки полосы прокрутки при помощи других CSS свойств.

scrollbar-3dlight-color — задает цвет верхней и левой границ полосы прокрутки, ее бегунка и стрелок. scrollbar-arrow-color — задает цвет стрелок на кнопках полосы прокрутки. scrollbar-darkshadow-color — задает цвет «тени», отбрасываемой бегунком и кнопками полосы прокрутки (цвет правых и нижних гранией). scrollbar-face-color — задает основной цвет бегунка и кнопок прокрутки полосы прокрутки. scrollbar-highlight-color — задает цвет «освещенной» части бегунка и кнопок прокрутки полосы прокрутки (цвет левых и верхних их граней). scrollbar-shadow-color — задает цвет «неосвещенной» части бегунка и кнопок прокрутки полосы прокрутки (цвет правых и нижних их граней). Не путать с цветом «тени», задаваемым атрибутом scroll-darkshadow-color. scrollbar-track-color — задает цвет фона полосы прокрутки, той ее части, по которой перемещается бегунок.

Как говорилось выше, концевые кнопки могут быть либо активными, либо не активными. Различие между активными и не активными кнопками заключается только в цветах, используемых при отображении кнопок. На активной кнопке стрелка изображается при помощи цветов scrollbar-arrow-color (рисунок выше). На неактивной кнопке стрелка отображается при помощи цветов scrollbar-shadow-color и scrollbar-highlight-color. Остальные элементы активной и неактивной кнопки полностью совпадают.

Отдельно о фоне

Фон полосы прокрутки задается посредством свойства scrollbar-track-color (смотри рисунок выше). Если это свойство не задано, то фон формируется из двух цветов (scrollbar-highlight-color и scrollbar-face-color), расположенных в шахматном порядке (смотри рисунок ниже).

Почему раньше работало, а сейчас нет!

В то время как появился IE5.5 цвет скроллинга окна браузера задавали применяя свойства к элементу BODY. Однако, с выходом IE6 эти стили не всегда работают. Почему?

Это поведение связано с директивой DOCTYPE и её влиянием на боксовую модель браузера. В общем, если браузер находится в режиме совместимости (Quirks mode), то все OK, но если браузер следует стандартам (Standards mode), то стили для скроллбаров, применяемые к BODY не работают. Не вдаваясь в подробности скажу, что это легко исправить, применяя стили также и к элементу HTML (смотрите пример ниже) .

Примеры

Пара слов о других браузерах

Кроме Internet Explorer 5.5+ измененять полосы прокрутки с помощью CSS могут Opera 7.23+ и Konqueror 3.1+. Однако в Opera до версии 7.5 для этого необходимо изменить настройки браузера (Style options). Кроме того, Опера позволяет изменять скроллинг только, если она находится в режиме совместимости (Quirks mode).

Полоса прокрутки.

Коротенькая и совсем несложная глава про цвет полосы прокрутки.

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

В качестве элементов могут выступать любые блоки, в которых гипотетически может появляться полоса прокрутки

, и т.д.. в том числе и сама страница — тег .

В таблице ниже перечислены все свойства CSS из семейства scrollbar , а также показан результат применения этих свойств.

Свойство полосы прокрутки: Внешний вид:
scrollbar-3dlight-color: #ff0000; — Цвет верхней и левой тени ползунка и кнопок.
scrollbar-arrow-color: #ff0000; — Цвет стрелок на кнопках полосы прокрутки.
scrollbar-base-color: #ff0000; — Базовый цвет полосы прокрутки.
scrollbar-darkshadow-color: #ff0000; — Цвет нижней и правой тени.(dark shadow — темная тень)
scrollbar-face-color: #ff0000; — Цвет лицевой части полосы прокрутки.
scrollbar-highlight-color: #ff0000; — Цвет подсветки полосы прокрутки.
scrollbar-shadow-color: #ff0000; — Цвет тени полосы прокрутки (shadow-тень).
scrollbar-track-color: #ff0000; — Цвет дорожки для полосы прокрутки.

Ну вот Вам ещё и рисунок для наглядности:

Возможные значения свойств из семейства scrollbar:

  • #ff0000 — Шестнадцатеричное значение цвета RGB.
  • red — Именное значение цвета.
  • RGB(255, 0, 0) — Значение цвета RGB.
  • inherit — применяется значение родительского элемента.(по умолчанию)

scrollbar-color

Easily manage projects with monday.com

The scrollbar-color property controls the two colors of a scrollbar: the thumb color and the track color. scrollbar-color is part of the CSS Working Group’s Scrollbars Module Level 1 draft, which is still a work in progress as of this writing.

Prior to scrollbar-color , developers had no standard way to change the default appearance of a browser’s scrollbars without resorting to hiding the scrollbar via overflow: hidden and rendering JavaScript-based scrollbars or using browser-prefixed scrollbar attributes. With scrollbar-color , on the other hand, we can style a scrollbar to match a design without resorting to redoing browser functionality or using vendor prefixes.

Go wild with custom colors

scrollbar-color will also accept values of dark and light to match a user’s preferences if they’re using something like dark mode on Mac OSX.

As of March 2020, support for dark and light values is not available in any browser. is supported in Firefox. See the browser support section below for details.

Syntax

Values

scrollbar-color accepts the following values:

  • auto is the default value and will render the standard scrollbar colors for the user agent.
  • dark will tell the user agent to use darker scrollbars to match the current color scheme.
  • light will tell the user agent to use lighter scrollbars to match the current color scheme.
  • specifies two colors to be used for the scrollbar. The first color is for the «thumb» or the moveable part of the scrollbar which appears on top. The second color is for the «track» or the fixed portion of the scrollbar.

Example

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

CSS3.com — A comprehensive CSS 3 reference guide, tutorial, and blog

CSS SCROLLBAR-HIGHLIGHT-COLOR

This property describes the color of the inner top and left bevel edges (the normally darker portion of the “highlights”) of the scrollbar arrows, the scroll bar slider box, and half of the dither pattern color of the scrollbar slider tray area (the other half of the dither is taken from the OS default button face color.)

Example

body <
scrollbar-highlight-color: yellow
>

Каскадные таблицы стилей CSS советы & приёмы

Смотрите также указатель всех приёмов работы.

Бесцветные полосы прокрутки

Некоторые браузеры (IE, Konqueror) поддерживают нестандартные свойства ‘scrollbar-shadow-color’, ‘scrollbar-track-color’ и другие. Эти свойства нелегальны: они не определены ни в одной из спецификаций CSS и не содержат отметки, указывающей на то, что это собственная разработка (такая отметка ставится путем добавления приставки «-vendor-«). Но, к счастью, вы можете легко отключить их.

Чтобы быть уверенными, что ваш браузер сохранит нормальные цвета полосы прокрутки, вам нужно использовать пользовательскую таблицу стилей и объявление ‘!important’. Пользовательскую таблицу стилей обычно можно выбрать в меню настройки/параметров браузера. В IE вы найдете соответствующую настройку во вкладке «Доступность» («Accessibility»), а в Konqueror — во вкладке «Стили» («Stylesheets»).

  1. Если у вас еще нет пользовательской таблицы стилей, создайте новый CSS-файл. Вы можете сохранить его где угодно.
  2. Добавьте следующие строки в файл таблицы стилей:
  3. Укажите путь к этому файлу в соответствующем диалоговом окне вашего браузера.

Это должно сработать. Вам необходимо перезапустить браузер для того, чтобы увидеть эффект. Чтобы убедиться, что сработало, можете посмотреть небольшой тест, который я сделал.

Created 12 Oct 2001;
Last updated Вт 05 ноя 2020 19:12:56

Изменить полосу прокрутки на CSS

2020-06-04 / Вр:22:51 / просмотров: 9176

Вы задумывались о том, как изменить полосу прокрутки на сайте? Я задумывался, так как иногда хочется, чтобы абсолютно все соответствовало гамме сайта, даже полоса прокрутки.
В этой статье попробуем изменить цвет прокрутки для вашего сайта, используя только таблицу стилей.
Но, к сожалению, не все браузеры поймут и смогут выполнить ваши требования, которые вы пропишите в CSS. Эти стили подойдут только для тех браузеров, которые созданы по образу и подобию Google Chrome, OPERA и Internet Explorer. Да, вы правильно поняли, Mozilla Firfox останется в сторонке .

Полоса прокрутки для Internet Explorer

  1. scrollbar-arrow-color – цвет стрелки.
  2. scrollbar-track-color – цвет подложки.
  3. scrollbar-face-color – цвет самой полосы.
  4. scrollbar-shadow-color
    scrollbar-highlight-color — цвет разделяющей полосы
  5. scrollbar-3dlight-color
    scrollbar-darkshadow-color — цвет внешних границ полосы

Код нужно вставит в CSS файл

Полоса прокрутки для Google Chrome

  1. webkit-scrollbar — скроллбар
  2. webkit-scrollbar-button — кнопка
  3. webkit-scrollbar-track — трек
  4. webkit-scrollbar-track-piece — видимая часть трека
  5. webkit-scrollbar-thumb — ползунок
  6. webkit-scrollbar-corner – уголок
  7. webkit-resizer — изменение размеров

Различные состояния для полосы прокрутки

Эти псевдо селекторы позволяют точнее выбирать разные части полосы прокрутки для различного состояния. Описание смотрите на блоге WebKit (на англ. ).

:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive

Стилизация пользовательского скроллбара с помощью CSS и Jquery

Наверняка вы видели сайты с оригинальными полосами прокрутки. Это достигается с помощью нового CSS scroll свойства webKit-scrollbar . К сожалению, оно работает только в браузерах на движке WebKit . Но поддерживается jQuery почти во всех обозревателях. Давайте выполним стилизацию скроллбара.

Данное свойство поддерживается версиями Google Chrome для настольных компьютеров и мобильных устройств, Apple Safari , Flock , OmniWeb . Даже если вы создаете дизайн только для этих браузеров без использования jQuery , то сможете охватить только 72% пользователей интернета. Но если у вас нет аллергии на программирование, то можете быть уверены, что каждый ваш посетитель увидит красиво стилизованный скроллбар.

Стилизация скроллбара

Полосы прокрутки реализованы там, где длина контента превышает ширину окна контейнера. Благодаря этому вы получаете возможность стилизовать iframe , элементы div и поле ввода текста. В iframe и текстовой области окна браузеры автоматически добавляют полосу прокрутки в нижней части, когда содержимое выходит за пределы видимой области. Тем не менее, в контейнерах необходимо предоставлять дополнительную информацию для браузеров. Установка свойству overflow значения scroll говорит браузерам о том, что нужно выводить полосы прокрутки в случае переполнения окна контентом:

Это код scrolling CSS покажет полосу прокрутки такой (справа)

Использование псевдоэлементов CSS для настройки скроллбара

IE5.5 был первым браузером, поддерживающим основные стили для скроллинга. Используя свойство scrollbar-face-color , можно были изменить цвет полос прокрутки. Хотя это и не добавляло большого разнообразия, но все же лучше, чем стандартная полоса прокрутки в браузере. Поскольку это свойство по-прежнему поддерживается в Internet Explorer , его можно использовать для пользователей, предпочитающих этот браузер.

Для WebKit-браузерах в CSS существует множество вариантов стилизации: изменение цвета и ширины полосы прокрутки, ползунков. Элементы скроллинга можно выбрать с помощью следующих псевдоэлементов.

  1. ::webkit-scrollbar — позволяет настроить ширину и цвет полосы прокрутки. Когда этот псевдоэлемент указан, WebKit выключает свой встроенный рендеринг скроллбара и использует настройки, указанные для div scroll CSS . Обратите внимание, что при этом будут выбраны все полосы прокрутки, присутствующие на странице. Если нужно настроить скроллбар для определенного элемента, необходимо применить это свойство к конкретному элементу:
  1. ::-webkit-scrollbar-thumb – Это ползунок скроллбара ( чем вы держите и прокручиваете страницу ). Он может иметь цвет или использовать градиент в качестве фона. Пример реализации:
  1. ::-webkit-scrollbar-track – позволяет настроить трек скроллбара ( путь движения ползунка ). Синтаксис псевдоэлемента для CSS scroll :
  1. ::-webkit-scrollbar-button – разработчики CSS3 не упускают из виду маленькие кнопки на концах полосы прокрутки. Их также можно настроить, так как они помогают, когда страница длинная и скроллбар становится слишком маленьким для прокрутки. Это свойство стиля верхнего и нижнего углов ( или левого и правого для горизонтальных полос прокрутки ):
  1. ::-webkit-scrollbar-corner – позволяет справиться с ситуацией, когда появляются обе полосы прокрутки и пересекаются в углу:

Вот несколько примеров, которые демонстрируют силу свойства scrolling CSS .

Настройка скроллбара с помощью Jquery

Если вам нравится программирование front-end , вы можете использовать Jquery-плагин JScrollPane . Он довольно прост в использовании. После того, как вы загрузили и подключили соответствующие файлы в заголовке документа, нужно вызвать одну Javascript-функцию для инициализации панели прокрутки. Вы можете легко изменить дизайн полосы прокрутки с помощью CSS или выбрать одну из существующих тем.

С помощью этого плагина вы можете создавать скроллинг для всех типов браузеров. Так что я бы посоветовал вам воспользоваться им, чтобы сэкономить время и охватить сразу все браузеры:

Если вы захотите изменить настройки CSS scroll по умолчанию, предоставленные JScrollPane , нужно редактировать стили соответствующих элементов:

Вывод

Пользовательские скроллбары больше не являются редкостью. Вы найдете их на большинстве сайтов и блогов. А с JScrollPane стало гораздо проще создавать и отображать стилизованные полосы прокрутки во всех браузерах. Надеюсь, этот урок оказался для вас полезным.

Данная публикация представляет собой перевод статьи « Scrollbar styling using CSS and Jquery » , подготовленной дружной командой проекта Интернет-технологии.ру

Д) scrollbar-highlight-color.

33) Какое из свойств в CSS определяет форму курсора мыши в виде песочных часов, которую он принимает при наведении на элемент страницы?

а) cursor: wait;

г) cursor: crosshair;

д) cursor: default.

34) Какое из свойств определяет форму курсора мыши в виде обычной стрелки (курсор по умолчанию)?

б) cursor: hand;

г) cursor: crosshair;

д) cursor: default.

35) Какие единицы измерения не относятся к абсолютным?

а) дюймы(in);

б)сантиметры (cm);

в)миллиметры (mm);

г)точки (pt),

Д) пиксели (px).

36) Какое свойство CSS используется для задания полей, неких свободных, никем не занятых пространств вокруг границы блока?

б) margin;

37) Какое свойство определяет нижнее поле элемента?

г) margin-bottom;

38) Какое свойство CSS используется для задания отступов, чтобы отделить основное содержимое блока от границы таким образом, чтобы граница располагалась на некотором расстоянии от содержимого?

а) padding;

39) Какое свойство указывает величину отступа от элемента сверху?

а) padding-top;

40) Какое свойство границ определяют толщину границ блоков для верхнего сегмента блока?

а) border-top-width;

41) Какое свойство границ задает цвет правого сегмента границы?

б) border-right-color;

42) Какое свойство границ задает тип линии, которой будет отображаться нижняя граница блока?

в) border-bottom-style;

43) Какое значение свойства границы border-style задает границу таким образом, что граница выглядит, как вдавленная в страницу линия, напоминающая желобок?

Д) groove.

44) Какое значение свойства границы border-style задает границу таким образом, что граница выглядит, как рельефная линия, выступающая над поверхностью страницы?

г) ridge;

45) Какое значение свойства границы border-style задает границу таким образом, что весь блок выглядит как бы выступающим над поверхностью страницы?

в) outset;

46) Какое значение свойства границы border-style задает границу таким образом, что создается впечатление “вдавленности” всего блока в поверхность страницы?

б) inset;

47) Какое значение свойства границы border-style задает границу таким образом, что граница отображается в виде сплошной линии, толщина которой равна значению border-width?

а) solid;

48) Какой тип позиционирования подразумевает назначение точных координат расположения элемента?

а) абсолютное;

49) Какой тип позиционирования позволяет разместить блоки на странице в координатах охватывающего их блока?

б) относительное;

50) Какой тип позиционирования позволяет зафиксировать блок на странице, он всегда будет находиться в области просмотра страницы, т.е. не будет прокручиваться?

в) фиксированное;

51) При использовании какого типа позиционирования позиционированные объекты могут накладываться друг на друга?

а) абсолютное;

52) Среди параметров стиля, какое специальное свойство позиционирования используется для указания порядка, в котором элементы будут перекрывать друг друга, т.е. позволяет управлять порядком наслоения абсолютно позиционированных элементов друг на друга?

Д) z-index.

53) Среди параметров стиля, какое специальное свойство позиционирования используется для задания расстояния в пикселах от верхнего края окна (y-координата)?

а) left;

54) При использовании свойства z-index тот блок, у которого значение свойства z-index больше будет располагаться

а) поверх всех остальных блоков;

б) под всеми остальными блока;

в) справа от всех остальных блоков;

г) слева от всех остальных блоков;

д) внизу от всех остальных блоков.

55) Какое свойство статических блоков определяет, будет ли блок плавающим, и в какую сторону он будет перемещаться?

а) float;

56) Какое свойство статических блоков определяет, какие стороны перемещаемых блоков не могут соседствовать с другими перемещаемыми блоками?

в) display;

57) Какое значение свойства display отключает отображение блока в окне броузера так, как будто его никогда не было в коде страницы?

а) none;

58) С помощью какого значения свойства display элемент становится частью списка?

г) list-item;

59) Какое значение свойства display определяет строчный блок?

б) inline;

60) Какое значение свойства display определяет некий элемент как структурный блок?

в) block;

61) Какое свойство статических блоков задает тип конкретного блока?

а) float;

62) Какое свойство статических блоков управляет видимостью блока?

в) display;

63) Какое значение свойства overflow добавляет полосы прокрутки к блоку отображения?

а) scroll;

64) При использовании какого значения свойства overflow, содержимое, превышающее размеры блока увеличивает размеры блока отображения?

г) auto;

д) нет верного ответа.

65) Какое значениесвойства overflowпредписывает броузеру обрезать содержимое, которое превышает размеры блока?

б) visible;

66) Какое значение свойства overflow добавляет полосы прокрутки к блоку отображения в случае, если размеры содержимого элемента превосходят размеры блока отображения?

б) visible;

67) Какое свойство статических блоков определяет поведение элемента, когда размеры его содержимого не соответствуют размерам блока отображения?

Д) overflow.

68) Какой из перечисленных фильтров в CSS задает уровень прозрачности элемента страницы?

г) Alpha;

69) Какой из перечисленных фильтровсоздает эффект движения объекта, размытие?

а) Blur;

70) Какой статический фильтр в CSS делает прозрачным отдельный цвет элемента Web-страницы?

б) Xray;

71) Какой статический фильтр в CSS отбрасывает тень у элемента страницы, которая отображается отдельно от самого элемента?

а) DropShadow;

72) Какой из перечисленных фильтровотражает объект симметрично относительно центральной горизонтальной оси?

б) Fliph;

73) Какой статический фильтр в CSS создает зеркальное отражение объекта относительно вертикальной оси?

г) Flipv;

74) Какой статический фильтр в CSS создает эффект “сияния” элемента страницы?

а) Glow;

75) Какой из перечисленных статических фильтров инвертирует пиксели объекта?

а) Invert;

76) Какой из перечисленных статических фильтров выводит объект в градациях серого, удаляя всю информацию о цветах?

а) Chroma;

77) Какой статический фильтр в CSS создает эффект отбрасывания тени у элемента страницы?

Д) Shadow.

78) Какой из перечисленных фильтров изменяет глубину цвета объекта и отрисовывает черно-белым, делая его похожим на рентгеновский снимок?

г) Xray;

79) Какой статический фильтр в CSS выполняет синусоидальное преобразование объекта вдоль вертикальной оси, создает волнистое искажение элемента Web-страницы?

г) Wave;

80) При использовании фильтра BasicImage, какой параметр выводит содержимое Web-страницы в серых тонах?

CSS scrollbar — разукрашиваем scrollbar средствами CSS

В некоторых случаях можно пожертвовать привычным видом элементов управления и немного оживить интерфейс своими собственными стилями. Сегодня мы поговорим о полосах прокрутки (scrollbar), а точнее о том, как изменить их вид с помощью CSS.

CSS свойства scrollbar

С самого начала хочу отметить, что описываемые ниже CSS свойства являются расширением спецификации CSS2, введенным компаний Microsoft, реализованным начиная с IE 5.5

Полоса прокрутки состоит из фона, ползунока и концевых кнопок со стрелками.

Кнопки могут быть как активными так и нет. Если скроллбар неактивен, то ползунок отсутсвует.

Самый простой способ изменить полосу прокрутки это задать свойство scrollbar-base-color. Это свойство задает основной цвет полосы прокрутки. Если не определены другие свойства полосы прокрутки, то бегунок и кнопки прокрутки будут отображаться определенным вами цветом с применением трехмерных эффектов. Фон полосы прокрутки будет отображаться тоже этим цветом, но только осветленным.

Например, scrollbar-base-color:lime приведет к результат представленому на рисунке ниже.

Конечно можно делать более тонкие настройки полосы прокрутки при помощи других CSS свойств.

scrollbar-3dlight-color — задает цвет верхней и левой границ полосы прокрутки, ее бегунка и стрелок. scrollbar-arrow-color — задает цвет стрелок на кнопках полосы прокрутки. scrollbar-darkshadow-color — задает цвет «тени», отбрасываемой бегунком и кнопками полосы прокрутки (цвет правых и нижних гранией). scrollbar-face-color — задает основной цвет бегунка и кнопок прокрутки полосы прокрутки. scrollbar-highlight-color — задает цвет «освещенной» части бегунка и кнопок прокрутки полосы прокрутки (цвет левых и верхних их граней). scrollbar-shadow-color — задает цвет «неосвещенной» части бегунка и кнопок прокрутки полосы прокрутки (цвет правых и нижних их граней). Не путать с цветом «тени», задаваемым атрибутом scroll-darkshadow-color. scrollbar-track-color — задает цвет фона полосы прокрутки, той ее части, по которой перемещается бегунок.

Как говорилось выше, концевые кнопки могут быть либо активными, либо не активными. Различие между активными и не активными кнопками заключается только в цветах, используемых при отображении кнопок. На активной кнопке стрелка изображается при помощи цветов scrollbar-arrow-color (рисунок выше). На неактивной кнопке стрелка отображается при помощи цветов scrollbar-shadow-color и scrollbar-highlight-color. Остальные элементы активной и неактивной кнопки полностью совпадают.

Отдельно о фоне

Фон полосы прокрутки задается посредством свойства scrollbar-track-color (смотри рисунок выше). Если это свойство не задано, то фон формируется из двух цветов (scrollbar-highlight-color и scrollbar-face-color), расположенных в шахматном порядке (смотри рисунок ниже).

Почему раньше работало, а сейчас нет!

В то время как появился IE5.5 цвет скроллинга окна браузера задавали применяя свойства к элементу BODY. Однако, с выходом IE6 эти стили не всегда работают. Почему?

Это поведение связано с директивой DOCTYPE и её влиянием на боксовую модель браузера. В общем, если браузер находится в режиме совместимости (Quirks mode), то все OK, но если браузер следует стандартам (Standards mode), то стили для скроллбаров, применяемые к BODY не работают. Не вдаваясь в подробности скажу, что это легко исправить, применяя стили также и к элементу HTML (смотрите пример ниже) .

Примеры

Пара слов о других браузерах

Кроме Internet Explorer 5.5+ измененять полосы прокрутки с помощью CSS могут Opera 7.23+ и Konqueror 3.1+. Однако в Opera до версии 7.5 для этого необходимо изменить настройки браузера (Style options). Кроме того, Опера позволяет изменять скроллинг только, если она находится в режиме совместимости (Quirks mode).

Илон Маск рекомендует:  Красно черные деревья
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL