scrollbar-track-color в CSS


Содержание

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).

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.

Илон Маск рекомендует:  Что такое код mailparse_msg_free

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

Web Style Sheets CSS tips & tricks

See also the index of all tips.

Un-colored scrollbars

Some older browsers (IE 8, Konqueror 3) support the non-standard properties ‘scrollbar-shadow-color’, ‘scrollbar-track-color’ and others. These properties are illegal: they are neither defined in any CSS specification nor are they marked as proprietary (by prefixing them with «-vendor-«). But luckily you can easily disable them.

Some newer browsers (Safari, Chrome) have a different, but equally non-standard way to change the scrollbars.

To make sure the scrollbars of your browser keep their normal colors, you use the user style sheet and the ‘!important’ declaration. The user style sheet can usually be configured via the options/settings menu of the browser. In IE you find it under the «Accessibility» tab, in Konqueror under the «Stylesheets» tab.

  1. If you don’t have a user style sheet yet, start by creating a new CSS file. You can put it anywhere.
  2. Add the following lines to this style sheet file:
  3. Enter the path to this file in the corresponding dialog box of your browser.

This should do the trick. You may have to exit and restart the browser to see the effect. To check if it worked, you can look at a small test I made.

Created 12 Oct 2001;
Last updated Tue 05 Nov 2020 07:12:55 PM UTC

Справочник по 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

Стилизация пользовательского скроллбара с помощью 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 » , подготовленной дружной командой проекта Интернет-технологии.ру

HTML Source : HTML Tutorials

Scrollbars don’t have the greatest reputation among Internet users. In fact, most people hate them, so it’d be nice if you could do something to make them more fun. Well, at least dress them up from that dull default gray. Look at our lovely colourful bars, they complement the look of the site beautifully and most importantly, were very easy to make.

This page was last updated on 2012-08-21

Browser Compatibility Note:

Styling the scrollbars is only supported by » Internet Explorer 5.5+. It will not work in Netscape or other browsers or earlier versions, but it won’t mess them up either. Gooood.

The properties are non-standard CSS, and will stop your site’s stylesheet from validating. It’s not that big a deal, but purists beware.

Coloured Scrollbars

This is the code you need to put in the part of your document, or into your existing stylesheet if you have one.

Note that most other sites tell you to apply these styles to the body element. If done this way, the properties will only work in IE6 in ‘quirks mode’ — that is, when the DTD is incorrect. If you’re using a full DOCTYPE (HTML 4.01 | XHTML 1.0) and apply it to the body of the document, they will not be coloured, as the properties are non-standard CSS. However, it’s been found that if you apply them to the html element, due to some bug in the way IE6 works out inheritance, the styles will be applied after all.

Apply the CSS attributes on your html tag as below will affect all the scrollbars on your page, including any horizontal and mini-scrolls that appear for textarea s or iframes.

html <
scrollbar-base-color: #9999cc;
scrollbar-arrow-color: white;
scrollbar-track-color: #ccccff;

scrollbar-shadow-color: black;
scrollbar-lightshadow-color: black;
scrollbar-darkshadow-color: gray;

scrollbar-highlight-color: white;
scrollbar-3dlight-color: black;
>

Of course, you can edit any of those values in HEX or color-name codes to suit your site. Note that you can specify the shadow color as one color, or go more in-depth and pick a light shadow and a dark shadow. The highlight option above is the strip that flows down the left side of the moveable bar. The ‘3dlight’ is the leftmost strip, which is a part of the highlight and very narrow.

Setting an iframe or textarea scrollbar is the same as any other element. Either do it with class es, or add inline-style code into the tag itself.

Diagram

scrollbar-base-color: red;
scrollbar-arrow-color: white;

scrollbar-shadow-color: blue;
scrollbar-lightshadow-color: green;
scrollbar-darkshadow-color: blue;

scrollbar-highlight-color: yellow;
scrollbar-3dlight-color: black;

The red/yellow area down here is a dithered blend of your base and highlight colours. Control it separately with scrollbar-track-color: blue .

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: 53407b61ae788ea1 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

Стилизация полосы прокрутки (скроллбара) с помощью CSS

Существует несколько способов реализации пользовательской полосы прокрутки. В этом уроке мы будем использовать CSS3, что является самым простым способом. Конечно, есть jQuery-плагины, которые могут помочь с настройкой полосы прокрутки, но я не люблю добавлять много JavaScript на свой сайт. Если вы дизайнер, фотограф или просто хотите, чтобы на вашем сайте был крутой скроллбал, воспользуйтесь каким-нибудь jQuery-плагином.

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

Прежде чем начать, давайте рассмотрим из чего состоит скроллбар:

Терминология

Скролбар состоит из семи различных элементов:

Теперь, когда вы знакомы с терминологией, давайте начнем!

Настройка

Создайте файлы index.html и style.css. В index.html поместите следующее:

Теперь займемся style.css

Во-первых, мы устанавливаем для класса .scrollbar width, height, background-color, затем устанавливаем overflow-y: scroll чтобы получить вертикальную полосу прокрутки. Мы задали min-height: 450px элементу с классом .force-overflow, чтобы появилась полоса прокрутки (т.к. мы использовали свойство overflow-y для скролла в классе .scrollbar).

Теперь мы используем ::-webkit-scrollbar для стилизации полосы прокрутки. Он заменит ширину по умолчанию новой шириной, равной 6px и фоном с цветом #F5F5F5 :

Теперь мы изменим вид ползунка на более привлекательный. Мы используем псевдоэлемент (т. е. ::- webkit-scrollbar-thumb) и устанавливаем цвет ползунка — background-color.

После этих манипуляций ползунок выглядит так:

Мы использовали box-shadow и scrollbar-track , чтобы сделать его стильным и добавить контраст между полосой прокрутки и треком.

Заключение

В заключении еще раз повторимся:

  • Стилизованные полосы прокрутки не являются чем-то необычным. Вы найдете их на основных сайтах и блогах, особенно на личных портфолио.
  • Если вам нужна кроссбраузерность, то к вашим услугам тонны jQuery-плагинов, которые могут помочь с настройкой скроллбара.
  • Пользовательские полосы прокрутки отображаются лишь в браузерах, использующих механизм рендеринга Webkit (и Blink), с помощью вендорного префикса -webkit .

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

Как задать расположение и цвет скроллбара?

29.10.2015, 12:26

Цвет скроллбара в iframe
Здрасвствуйте,не подскажите как можно в iframe поменять цвет скроллбара?

Задать стили (цвет текста) списку. Как задать цвет текста
Помогите задать стили(цвет текста) списку. Как задать цвет текста ?

Как задать цвет фона?
Всем добрый вечер. Столкнулся с такой проблемой. Не получается задать задний фон. Для этого блока.

Как элементу задать и цвет и градиент одновременно?
Типа такого, чтобы градиент был над цветомbackground: red, linear-gradient(to top, black, white);

Красивое оформление скроллбара с помощью CSS

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

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

Элемент управления Scrollbar позволяет пользователю прокручивать изображение или другое представление, которое слишком велико, чтобы видеть полностью. Обратите внимание, что аналогичное управление слайдером используется для выбора числовых значений, а не прокрутки. Знакомые примеры включают вертикальную полосу прокрутки со стороны текстового редактора и вертикальную и горизонтальную пару баров для просмотра части большого изображения или карты.

Используя эти новые псевдоэлементы и некоторые простые стили, вы можете создавать красивые полосы прокрутки для тела вашего сайта.

::-webkit-scrollbar-track <
background: #f7efef;
border-radius: 5px;
>

::-webkit-scrollbar-thumb <
background: #a5a2a2;
border-radius: 5px;
>

Возможно, плоские простые полосы прокрутки, это не ваш стиль, где образец прокрутки, который имеет небольшой градиент.

::-webkit-scrollbar-track <
background: #f3f0f0;
border-radius: 5px;
box-shadow: inset 0 0 6px rgba(23, 22, 22, 0.22);
>

::-webkit-scrollbar-thumb <
background: #a0c8d8;
background: -moz-linear-gradient(left, #a4c3d0 0%, #28a3ca 50%, #b2d2de 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #accfde), color-stop(50%, #2caad2), color-stop(100%, #bce0ee));
background: -webkit-linear-gradient(left, #a3bfcc 0%, #29b8e5 50%, #b1d3e0 100%);
background: -o-linear-gradient(left, #9ebecc 0%, #29b8e5 50%, #a0c5d4 100%);
background: -ms-linear-gradient(left, #9dc1d0 0%, #29b8e5 50%, #aed2e0 100%);
background: linear-gradient(to right, #a6c9d8 0%, #29b8e5 50%, #b2d2de 100%);
border-radius: 5px;
filter: prog , GradientType=1);
>

Вам нужны полосы прокрутки только для отдельных элементов, что в некоторых ситуациях, когда это выглядело бы великолепно, это pre элементы, так же table-responsive класс или что-либо с горизонтальным или вертикальным переполнением.

Вот пример использования pre элемента, здесь измените размер браузера, чтобы увидеть полосы прокрутки.

pre::-webkit-scrollbar <
height: 14px;
width: 14px;

pre::-webkit-scrollbar-thumb <
background-color: rgba(47, 46, 46, 0.2);
border: 3px solid #fbf6f6;
border-radius: 8px;
>

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

Сначала мы рассмотрим основные свойства CSS прокрутки:

::-webkit-scrollbar
::-webkit-scrollbar-thumb
::-webkit-scrollbar-track
::-webkit-scrollbar-button
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-corner
::-webkit-resizer

Илон Маск рекомендует:  Собираем очень мощный компьютер за 50000-55000 рублей
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL