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:
Стилизация пользовательского скроллбара с помощью 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 существует множество вариантов стилизации: изменение цвета и ширины полосы прокрутки, ползунков. Элементы скроллинга можно выбрать с помощью следующих псевдоэлементов.
Вот несколько примеров, которые демонстрируют силу свойства scrolling CSS . Настройка скроллбара с помощью JqueryЕсли вам нравится программирование front-end , вы можете использовать Jquery-плагин JScrollPane . Он довольно прост в использовании. После того, как вы загрузили и подключили соответствующие файлы в заголовке документа, нужно вызвать одну Javascript-функцию для инициализации панели прокрутки. Вы можете легко изменить дизайн полосы прокрутки с помощью CSS или выбрать одну из существующих тем. С помощью этого плагина вы можете создавать скроллинг для всех типов браузеров. Так что я бы посоветовал вам воспользоваться им, чтобы сэкономить время и охватить сразу все браузеры: Если вы захотите изменить настройки CSS scroll по умолчанию, предоставленные JScrollPane , нужно редактировать стили соответствующих элементов: ВыводПользовательские скроллбары больше не являются редкостью. Вы найдете их на большинстве сайтов и блогов. А с JScrollPane стало гораздо проще создавать и отображать стилизованные полосы прокрутки во всех браузерах. Надеюсь, этот урок оказался для вас полезным. Данная публикация представляет собой перевод статьи « Scrollbar styling using CSS and Jquery » , подготовленной дружной командой проекта Интернет-технологии.ру Изменить полосу прокрутки на CSS2020-06-04 / Вр:22:51 / просмотров: 9176 Вы задумывались о том, как изменить полосу прокрутки на сайте? Я задумывался, так как иногда хочется, чтобы абсолютно все соответствовало гамме сайта, даже полоса прокрутки. Полоса прокрутки для Internet Explorer
Код нужно вставит в CSS файл Полоса прокрутки для Google Chrome
Различные состояния для полосы прокрутки Эти псевдо селекторы позволяют точнее выбирать разные части полосы прокрутки для различного состояния. Описание смотрите на блоге WebKit (на англ. ). :horizontal -ms-scrollbar-shadow-color propertySpecifies the color of the bottom and right edges of the scroll box and scroll arrows of a scroll bar. SyntaxProperty values
CSS information
Standards informationThere are no standards that apply here. RemarksWindows Internet Explorer 8. The -ms-scrollbar-shadow-color attribute is an extension to CSS, and can be used as a synonym for scrollbar-shadow-color in IE8 Standards mode. The scroll box is the square box within a scroll bar that can be moved either up and down or left and right on a track to change the position of the content on the screen. The scroll arrows, located at each end of a scroll bar, are the square buttons containing the arrows that move the content on the screen in small increments, either up and down or left and right. This property applies to elements that display a scroll bar. Cascading Style Sheets (CSS) enable scrolling on all objects through the overflow property. These objects are not listed in the Applies To list for this property. ExamplesThe following example shows how to create a style rule that sets the -ms-scrollbar-shadow-color property for a textArea element. Кастомизация скроллбаров в браузере: компромисс между технологиями html, css, js и удобством использованияПриветствую всех!Статья посвещена решению проблемы кастомизации скроллбаров браузера ради воплощения в жизнь амбициозных идей дизайнера. Статья расчитана на тех, кто свободно ориентируется в технологиях html, css, js, т.к. предлагаемое решение основано на их компромиссном использовании. В статье будут описаны и решены следующие задачи и цели:
Intro. Возможности системного скрола.Чтобы было от чего отталкиваться, я приведу простой пример (посмотреть в работе): Браузер для навигации по контенту в такой области предоставляет следующие возможности (советую попробовать все из них):
Как можно заметить, набор возможностей весьма большой и он весьма хорошо реализован, продуман, удобен и привычен для конечного пользователя… Стоит ли это все или часть этого реализовывать средствами js, чтобы изменить внешний вид скроллбаров? Решение имеет следующую структуру на html: Scrollar — одновременно название решения и namespace, чтобы исключить пересечение стилей на целевой странице, где решение может быть использовано. Чтобы было понятнее — поясню структуру:
А теперь можно приступить к рассмотрению ключевых моментов. Основная тяжесть: операции Scroll и ResizeНа мой взгляд, это самые «тяжелые» и неудобные в реализации на javascript операции. Почему? Чтобы программно реализовать Resize и сохранение пропорций нужно, в основном, обрабатывать событие window.onresize, а во время возникновения этого события — корректировать размеры и пропорции у нескольких элементов (чаще всего так…). Недостатком ресайза подобным образом является неплавное (с небольшими непостоянными, заметными глазу, шагами) изменение размеров элемента, кто пытался подобное отладить — поймет меня. Это сильно «напрягает» глаза, когда вкладываешь душу в разработку и стараешься довести работу всего интерфейса до идела. Таким образом, чтобы сохранить максимальную плавность при изменении размеров элементов стоит использовать один из вариантов резиновой верстки блочных элементов с абсолютным позиционированием относительно друг друга и изменением размеров элементов за счет привязки к определенным координатам: после объявления таких стилей браузер будет сам изменять размеры как области прокрутки, так и внутренних элементов. Ниже по статье, стили некоторых элементов будут дополнены и скорректированы, чтобы добиться нужного и лучшего результата. О Scroll. Для реализации scroll на desktop-браузерах необходимо обрабатывать событие колеса мыши и анализировать значения от этого события (также не забывать, что некоторые мыши позволяют листать контент в горизонтальной плоскости, а не только в вертикальной), а для mobile-браузеров нужно обрабатывать события группы touch. Т.е. для кроссплатформенного решения нужно программировать две эти реализации. Но лучше прокрутку контента возложить на сам браузер. Достаточно определить стиль для элемента systemscrolls: Скрытие системных скроллбаров и 22pxРешая задачу прокрутки контента, я использовал свойство overflow:scroll, которое заставляет браузер отображать скроллбары всегда и тем самым предоставляет пользователю все удобства системной прокрутки. Но теперь нужно эти скроллбары скрыть. Здесь как раз и выручит viewport — этот блок будет скрывать всё, что выходит за его пределы. Это можно сделать двумя способами: Первый вариант с overflow прост для понимания, но когда пользователь захочет выделить контент и начнет тянуть курсор в нужную сторону, то он, вполне вероятно, увидит системные скроллбары, т.к. при таком действии они вылезут из-под скрываемой области. Вариант с clip таким не страдает, но в этом случае пришлось применить небольшой хак и для поддержки ie7. Но это ещё не всё… Блок systemscrolls имеет такие же размеры, как и блок viewport, т.е. системные скроллбары еще видны. Здесь и используется ключевой момент «22px» — это величина, на которую будет скорректирован блок systemscrolls. Дело в том, что толщина скроллбаров у популярных браузеров менее 21px. Сама корректировка выглядит так: После этого скроллбары будут скрыты и будут находиться за границами той области, которая обрезана с помощью clip. И что в итоге? Браузер сам изменяет и следит за размерами всего элемента, контент легко и плавно прокручивается всеми описанными выше способами, а системные скроллбары скрыты. Но если это оставить в таком виде, то часть контента справа и снизу отображаться не будет… Блок contentwrapОсновное и главное назначение блока contentwrap — это сделать так, чтобы в блоке viewport можно было увидеть блок content полностью: от одного края до другого при разных способах прокрутки. таким образом, размеры элемента contentwrap будут получаться из сложения этих величин с размерами блока content, и делать это будет нужно при каждом изменении размеров блока content. Есть исключения, но о них будет рассказано ниже. Блоки vscroll и hscrollvscroll и hscroll — скроллбары. На данный момент, основная задача — «приклеить» их к краям и заставить их изменять свои размеры и местоположение их дочерних элементов за счет браузера: в этом листинге нет ничего сложного и я перейду к более интересной части: бегунки. БегункиДля успешной реализации функционала бегунков нужно рассмотреть следующие задачи:
Изменение положения бегунка при прокрутке контентаЭто сделать крайне просто. Благодаря установленному свойству overflow:scroll у блока systemscrolls можно ловить собитие scroll на этом блоке, а уже при возникновении этого события двигать бегунок в зависимости от положения (свойства scrollLeft и scrollTop) контента относительно левой верхней точки блока systemscrolls с учетом коэффициента пропорциональности, который вычисляется в функции обновления параметров компонента (об этом будет ниже). Перетаскивание бегунковБегунок должен реагировать на поведение указателя мыши также, как и в системе. Сделать это весьма не сложно. Алгоритм заключается в следующем:
Как можно заметить, алгоритм весьма простой, но есть один нюанс: изменение положения бегунков, точнее алгоритм изменения этого положения. Менять положение бегунков можно двумя способами:
На первый взгляд, первый способ кажется лучше, т.к. требует меньше усилий для реализации. Но недостатком этого способа является присутствующая обратная связь через событие systemscrolls.scroll (см. рисунок), из-за которой бегунок начинает заметно отставать от указателя мыши при быстром перемещении последнего. При этом, событие systemscrolls.scroll возникает всякий раз при изменении свойств scrollLeft и scrollTop у блока systemscrolls, вызывая функцию перемещения бегунков. При втором способе можно получить гораздо лучший результат. Дополнительные операции по отсоединению и присоединению события systemscrolls.scroll происходят только два раза: на события mousemove и mouseup (соответственно) элемента document. Таким образом, обработка события document.mousemove происходить быстрее и оптимальнее (см. рисунок) Обновление параметров компонентаВот и дошло время до весьма важной функции — обновление параметров компонента. Для этой функции необходимо обеспечить скорость выполнения, т.к. она может вызываться при ресайзе и смене контента очень часто, поэтому большая часть её написана на чистом js. Ниже приведен кусок кода для обновления параметров по горизонтали: Из этого листинга хочу уделить внимание именно куску кода «Корректировка ширины contentwrap», остальное понятно и без объяснения. Смысл этого куска в следующем:
Когда нужно обновлять параметры компонента?
Если первые два случая весьма прозрачны, то вот последний таит в себе подводные камни. Контент может меняться не только во время удаления или добавления каких-либо элементов, но и по завершению загрузки каких-нибудь картинок, если их размеры не заданы заранее, и т.д. Можно отлавливать все варианты событий onload, но это не стоит того. Самое оптимальное решение — setInterval(update, 300) — функция update будет запускаться каждые 300 мс, нагрузки на браузер почти никакой и все весьма надежно. КастомизацияКастомизация — это то, ради чего всё это и затевалось. Целью было: свести к минимуму усилия верстальщика и сэкономить время. После нескольких экспериментов со структурой элементов в скроллбаре приведенная ниже структура является более гибкой: Эта верстка вертикального скроллбара (для горизонтального всё подобно). Преимущество такой структуры следующие:
По сути, вся кастомизация сводится к написанию стилей. В конце статьи будут приведены ссылки на примеры кастомизации, а также ссылки на файлы стилей для этих примеров. А если горизонтальный или вертикальный скрол не нужен?Все просто: при инициализации компонента нужно указать какой скрол не нужен (по умолчанию — оба отображаются). Управление видимостью и скролов производится с помощью добавления или удаления классов. Также добавление этих классов влияет на размеры контента (например, при hscroll: false ширина контента будет меняться автоматически за счет нативного функционала браузера) Как менять контент?Есть функция content(«action», content), где action — функция jQuery по управлению содержимым (text, html, append, prepend…). Также эту функцию можно вызвать без параметров, тогда она вернет объект jQuery и с ним можно работать, в этом случае параметры компонента будут обновляться каждые 300 мс. Примеры:
Ссылки к статье:Customization — на этой странице можно посмотреть несколько вариантов кастомизации, а также можно опробовать реакцию элемента прокрутки на изменение размеров окна браузера. Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Пользовательский интерфейс : -ms-scrollbar-shadow-colorМатериал из WebWikiABCDСодержаниеАтрибут -ms-scrollbar-shadow-color | Свойство scrollbarShadowColorЗадает цвет правой и нижней граней у ползунка и кнопок со стрелками в полосе прокрутки. Синтаксис
Используемые значенияЭто свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). У свойства нет значения по умолчанию. Атрибут Каскадных таблиц стилей (CSS) не наследуется. ЗамечанияПолоса прокрутки — это прямоугольный элемент с ползунком и кнопками со стрелками, с помощью которых можно изменять позицию контента страницы на экране по горизонтали или вертикали. Кнопки, находящиеся на каждом из концов полосы прокрутки, — прямоугольные, с навигационными стрелками, показывающими направление прокрутки. Нажимая на них, пользователь по чуть-чуть пролистывает контент по горизонтали или вертикали. Свойство scrollbarShadowColor применяется к элементам, для которых показывается полоса прокрутки. В Каскадных таблицах стилей (CSS) возможность скроллинга для всех объектов задается через свойство overflow. ПримерыВ примере свойство scrollbarShadowColor применяется к элементу textArea. СтандартыЭто свойство является расширением от Microsoft для CSS Как изменить цвет полосы прокрутки с помощью css Мой jsfiddle здесь Вы можете использовать следующие атрибуты для webkit, которые попадают в тень DOM: Здесь работает скрипка с красной полосой прокрутки на основе кода этой страницы, объясняющего проблемы. Используя это и ваше решение, вы можете обрабатывать все браузеры, кроме Firefox, которые в этот момент, я думаю, все еще нуждаются в решении javascript. Ваш css будет работать только в браузере IE. И css, предлагаемый hayk.mart, будет работать в браузерах webkit. И используя различные хаки CSS, вы не можете стирать полосы прокрутки браузеров с одинаковым результатом. Итак, лучше использовать плагин jQuery/Javascript, чтобы получить решение с перекрестным браузером с тем же результатом. Решение: Используя jScrollPane плагин jQuery, вы можете достичь кросс-браузерного решения Scrollbar-shadow-color в CSSCSS Codes and Examples www.tagindex.net scrollbar-***-color: ***;The scrollbar-***-color property changes the color of the scrollbars. Applying this property to the BODY (or HTML) element applies the specified style to an entire page. When you specify only the base color body < When you specify the detailed color body <
The element to which the style should be applied Standards mode : Apply these styles to the HTML element. Как задать расположение и цвет скроллбара? |
29.10.2015, 12:26 | |||||||||||||||||||||||||||||||||||||
Цвет скроллбара в iframe Задать стили (цвет текста) списку. Как задать цвет текста Как задать цвет фона? Как элементу задать и цвет и градиент одновременно? |