Цвета полосы прокрутки. Свойство scrollbar-color


Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Пользовательский интерфейс : -ms-scrollbar-track-color

Материал из WebWikiABCD

Содержание

Атрибут -ms-scrollbar-track-color | Свойство scrollbarTrackColor

Задает цвет полосы прокрутки (той её части, которая не закрыта ползунком).

Синтаксис

HTML
Скрипты [ vColor = ] object.style.scrollbarTrackColor

Используемые значения

Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). У свойства нет значения по умолчанию. Атрибут Каскадных таблиц стилей (CSS) не наследуется.

Замечания

Ползунок — это элемент полосы прокрутки, который может скользить влево-вправо или вверх-вниз в зависимости от расположения полосы прокрутки, и тем самым, передвигая ползунок, пользователь просматривает весь контент на странице.

Свойство scrollbarTrackColor применяется к элементам, для которых показывается полоса прокрутки. В Каскадных таблицах стилей (CSS) возможность скроллинга для всех объектов задается через свойство overflow.

Примеры

В примере свойство scrollbarTrackColor применяется к элементу textArea.


Стандарты

Это свойство является расширением от Microsoft для CSS

scrollbar css scroll css

меню

Hа титульную
Что такое CSS?
Синтаксис CSS
Свойства текста
Свойства шрифта
Свойства цвета и фона
Блочная модель
Позиционирование
Визуальное форматирование
Полоса прокрутки
Фильтры
Таблицы
Списки
Аппаратно-зависимый стиль
Страничные носители
Акустический CSS
Статьи

Свойства полоса прокрутки

Данные свойства задают стиль полосы прокрутки. Их можно применять к таких элементов как: BODY, TEXTAREA, IFRAME и другим, которые имеют полосу прокрутки (корми SELECT).

scrollbar css scroll css

Устанавливает цвет верха и левой части ползунка и кнопок со стрелками на полосе прокрутки.

Значение:

  • любое соответствующее стандарту значение цвета.
  • inherit — применяется значение родительского элемента.

scrollbar css scroll css

scrollbar css scroll css

Устанавливает цвет стрелок на кнопке со стрелками.

Значение:

  • любое соответствующее стандарту значение цвета.
  • inherit — применяется значение родительского элемента.

scrollbar css scroll css


scrollbar css scroll css

Устанавливает цвет основных элементов ползунка: ползунка, кнопок со стрелками, дорожки для ползунка, если не определены параметры в scrollbar-face-color.

Значение:

  • любое соответствующее стандарту значение цвета.
  • inherit — применяется значение родительского элемента.

Устанавливает цвет тени для ползунка и кнопок со стрелками.

Значение:

  • любое соответствующее стандарту значение цвета.
  • inherit — применяется значение родительского элемента.

Устанавливает цвет ползунка и кнопок со стрелками. Также, если вы не задали параметр SCROLLBAR-TRACK-COLOR, у вас изменится цвет дорожки.

Значение:

  • любое соответствующее стандарту значение цвета.
  • inherit — применяется значение родительского элемента.

Устанавливает цвет подсветки, создающий эффект объёмности. Это цвет, который окаймляет освещённую часть кнопочки. Когда кнопка не нажата, то цвет заливает левый верхний угол и стороны между ним, когда нажата — нижний правый угол.

Значение:

  • любое соответствующее стандарту значение цвета.
  • inherit — применяется значение родительского элемента.

Схоже с scrollbar-darkshadow-color.

Значение:

  • любое соответствующее стандарту значение цвета.
  • inherit — применяется значение родительского элемента.

Устанавливает цвет дорожки для ползунка.

Значение:

  • любое соответствующее стандарту значение цвета.
  • inherit — применяется значение родительского элемента.

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


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

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

Свойство scrollbar-face-color
Это свойство определяет цвет бегунка и фона кнопки прокрутки

Свойство scrollbar-track-color
С помощью этого свойства можно определить фон полосы прокрутки.

scrollbar-shadow-color
scrollbar-darkshadow-color
scrollbar-highlight-color
scrollbar-3dlight-color

Свойство scrollbar-arrow-color
Это свойство задает цвет изображения стрелки на кнопке прокрутки.

Все эти свойства прописываются в вашем файле стилевой таблицы:

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

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

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

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

Для того чтобы изменить дизайн полосы прокрутки, раскрасить её на свой лад, необходимо воспользоваться свойствами из семейства 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 — применяется значение родительского элемента.(по умолчанию)

Файл primer3.css
body <
background-color: #fff8dc;
scrollbar-3dlight-color: #ffebcd;
scrollbar-arrow-color: #ffffff;
scrollbar-base-color: #ffebcd;
scrollbar-darkshadow-color: #f5f5dc;
scrollbar-face-color: #b8860b;
scrollbar-highlight-color: #f5f5dc;
scrollbar-shadow-color: #f5f5dc;
scrollbar-track-color: #f5f5dc;
>
div <
padding: 20px;
overflow: auto;
width: 200px;
height: 100px;
border: solid 2px #deb887;
background-color: #ffffff;
>

ScrollBar

Компонент Delphi ScrollBar — элемент управления в виде ползунка представляет собой горизонтальную или вертикальную полосу прокрутки (рис 1).

С помощью ползунка ScrollBar мы можем выбрать целое число, не выходящее за пределы диапазона чисел от Min до Max в свойстве компонента. Изменять положение ScrollBar можно мышью, клавишами вверх, вниз, влево и вправо, или Page Up и Page Down. При перемещении ползунка изменяется свойство position, которое при необходимости можно можно задать программно, но только если позиция не будет выходить за пределы диапазона.

Свойства ScrollBar

Position значение которое может изменяться в пределах значений, задаваемые свойствами Min и Мах.
max максимальное значение для полосы прокрутки
min минимальное значение для полосы прокрутки
Kind устанавливает ориентацию ползунка: trHorizontal — горизонтальное расположение, trVertical — вертикальное
PageSize определяют, размер ползунка
SmallChange определяют сдвиг при клике на кнопки в конце и начале полосы прокрутки или нажатием клавиши со стрелкой
LargeChange определяет сдвиг при перемещении кликом рядом с бегунком или при нажатии клавиш PageUp или PageDown
Name имя компонента

Для примера использования ScrollBar можно взять функцию RGB для этого нам понадобится на форме 3 ScrollBar каждый из которых будет отвечать за определенный цвет из RGB т.е красный, зеленый и голубой в свойстве min в каждом ползунке ставим 0, а в свойстве max 255. Затем находим событием OnChange и двойным щелчком по пустому полю открываем редактор кода куда вставляем

Аналогично вставляем данный код для двух других компонентов ScrollBar. Теперь при перемещении ползунков мы меняем цвет формы.


Как изменить цвет скролл ползунка?

но ничего не происходит. Все по старому

2 ответа 2

Только IE6+ поддерживает это свойство. Плюс должен быть контент для скролла и фиксированный размер div’a.

А вот для FF не получится.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.11.35402

Как изменить цвет полосы прокрутки?

body
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-darkshadow-color: #000000;>

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

Для смены дизайна полос прокрутки у дизайнера должны быть ВЕСКИЕ причины.


К тому же, по-моему, далеко не все браузеры поддерживают эти свойства, да и IE — тока начиная с пятого.

Изменить цвет полосы прокрутки

Я хочу изменить стиль полосы прокрутки, для этого я использовал ниже css, но я хочу использовать его для определенного div на странице не для всей страницы. как я могу настроить его с помощью div-класса или id

Да, мы можем достичь этого, используя id элемента,

Надеюсь, что это сработает.

Примечание: я думаю, он отлично работает в хроме. но ff и т.д. он не работает.

Если вам действительно нужны некоторые пользовательские полосы прокрутки, есть некоторые хаки, которые вы можете использовать в Javascript и CSS. Хорошая статья о CSS-tricks.

Там также есть много плагинов jQuery. Один, который я использовал, называется Lazybars — действительно просто реализовать.

Надеюсь, что это поможет

Настройка CSS в настоящее время поддерживается только браузерами webkit (Safari, Google Chrome и Opera). IE и Firefox не поддерживают стили CSS для полос прокрутки. Чтобы настроить настраиваемую полосу прокрутки на основе CSS, вы должны использовать javascript-решение, которое эмулирует поведение прокрутки или заменяет собственные полосы прокрутки с помощью настраиваемых элементов (собственные полосы прокрутки находятся под этой настраиваемой полосой прокрутки или скрыты оболочкой с помощью overflow:hidden ).

Есть много бесплатных плагинов jQuery. Эмуляторы прокрутки (например, jScrollPane, Malihu Custom Scrollbar, perfect-scrollbar и т.д.) обеспечивают полный контроль над прокручиваемым контентом, но имеют больше js (для эмулирования и обработки всех событий) и прокрутки behaior отличается от обычного поведения прокрутки. Кроме того, много полос прокрутки на одной странице могут замедлить работу.

Полосы прокрутки, которые используют собственную прокрутку (например, jQuery Scrollbar, Scroller, Baron и т.д.) меньше кода и гарантируют, что прокрутка всегда будет работать (даже если плагин не работает из-за какой-либо ошибки) + меньше кода (поскольку нет необходимости эмулировать прокрутку) + автоматически поддерживает все функции прокрутки, такие как прокрутка к сфокусированному элементу, прокрутка по выбору текста, прокрутка к элементу привязки, сенсорная прокрутка и т.д.

Вы можете сравнить пользовательские плагины прокрутки здесь

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


Дата добавления: 2015-07-09 ; просмотров: 219 ; Нарушение авторских прав

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

Для того чтобы изменить дизайн полосы прокрутки, раскрасить её на свой лад, необходимо воспользоваться свойствами из семейства 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 — применяется значение родительского элемента.(по умолчанию)

Файл primer3.css
body <
background-color: #fff8dc;
scrollbar-3dlight-color: #ffebcd;
scrollbar-arrow-color: #ffffff;
scrollbar-base-color: #ffebcd;
scrollbar-darkshadow-color: #f5f5dc;
scrollbar-face-color: #b8860b;
scrollbar-highlight-color: #f5f5dc;
scrollbar-shadow-color: #f5f5dc;
scrollbar-track-color: #f5f5dc;
>
div <
padding: 20px;
overflow: auto;
width: 200px;
height: 100px;
border: solid 2px #deb887;
background-color: #ffffff;
>

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