scrollbar-base-color в CSS


Содержание

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

Материал из WebWikiABCD

Содержание

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

Задает цвет основных (базовых) элементов полосы прокрутки, включая саму полосу, ползунок и навигационные кнопки.

Синтаксис

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

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

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

Замечания

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

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

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

Примеры

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

Во втором примере цвет, заданный с помощью атрибута -ms-scrollbar-base-color, — одна из частей единой цветовой схемы web-страницы.

Стандарты

Это свойство является расширением от 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 » , подготовленной дружной командой проекта Интернет-технологии.ру

scrollbar-base-color

Рекомендованные сообщения

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Войти

Уже зарегистрированы? Войдите здесь.

Статистика пользователей

Сейчас на странице 0 пользователей

Нет пользователей, просматривающих эту страницу.

Спрашивают сейчас

Автор: npofopr
Создана 18 октября

Автор: envoleon
Создана Суббота в 14:42

Автор: digenis
Создана 17 часов назад

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 .

CSS customized scroll bar in div

How can I customize a scroll bar via CSS (Cascading Style Sheets) for one div and not the whole page?

16 Answers 16

I thought it would be helpful to consolidate the latest information on scroll bars, CSS, and browser compatibility.

Scroll Bar CSS Support

Currently, there exists no cross-browser scroll bar CSS styling definitions. The W3C article I mention at the end has the following statement and was recently updated (10 Oct 2014):

Some browsers (IE, Konqueror) 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-«)

Microsoft

As others have mentioned, Microsoft supports scroll bar styling, but only for IE8 and above.

Chrome & Safari (WebKit)

Similarly, WebKit now has its own version:

Firefox (Gecko)

As of version 64 Firefox supports scrollbar styling through the properties scrollbar-color (partially, W3C draft) and scrollbar-width (W3C draft). Some good information about the implementation can be found in this answer.

Cross-browser Scroll Bar Styling

JavaScript libraries and plug-ins can provide a cross-browser solution. There are many options.

The list could go on. Your best bet is to search around, research, and test the available solutions. I am sure you will be able to find something that will fit your needs.

Prevent Illegal Scroll Bar Styling

Just in case you want to prevent scroll bar styling that hasn’t been properly prefixed with «-vendor», this article over at W3C provides some basic instructions. Basically, you’ll need to add the following CSS to a user style sheet associated with your browser. These definitions will override invalid scroll bar styling on any page you visit.

Duplicate or Similar Questions / Source Not Linked Above

Note: This answer contains information from various sources. If a source was used, then it is also linked in this answer.

Кастомизация скроллбаров в браузере: компромисс между технологиями html, css, js и удобством использования

Приветствую всех!

Статья посвещена решению проблемы кастомизации скроллбаров браузера ради воплощения в жизнь амбициозных идей дизайнера. Статья расчитана на тех, кто свободно ориентируется в технологиях html, css, js, т.к. предлагаемое решение основано на их компромиссном использовании.

В статье будут описаны и решены следующие задачи и цели:

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

Intro. Возможности системного скрола.

Чтобы было от чего отталкиваться, я приведу простой пример (посмотреть в работе):

Браузер для навигации по контенту в такой области предоставляет следующие возможности (советую попробовать все из них):

  • колесо мыши (некоторые мыши кроме вертикальной прокрутки предоставляют возможность горизонтальной прокрутки)
  • клавиши-стрелки при фокусе на элементе (вверх, вниз, вправо, влево)
  • тачпад (особенные удобства и кайф от манипулирования контентом можно ощутить на тачпадах у компьютеров Macintosh)
  • тачскрин планшетов и телефонов, а также и компьютеров
  • также можно прокрутить контент, выделяя его (такая возможность предусмотрена для выделения, например, больших текстов, часть которых находится за пределами видимости)
  • и, непосредственно, элементы скроллбаров: ползунки и кнопки

Как можно заметить, набор возможностей весьма большой и он весьма хорошо реализован, продуман, удобен и привычен для конечного пользователя…

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

Решение имеет следующую структуру на html:

Scrollar — одновременно название решения и namespace, чтобы исключить пересечение стилей на целевой странице, где решение может быть использовано.

Чтобы было понятнее — поясню структуру:

  • корневой блок является оберткой для всей конструкции и определяет область и размеры всей конструкции в целом;
  • viewport — этим блоком ограничена область просмотра контента;
  • systemscrolls — этот блок отвечает за прокрутку контента;
  • contentwrap — это корректирующий блок (о его смысле и возможностях ниже);
  • content — непосредственно сам контент;
  • vtrack и htrack — вертикальный и горизонтальный скроллбары. С их содержимым и так все понятно.

А теперь можно приступить к рассмотрению ключевых моментов.

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

таким образом, размеры элемента contentwrap будут получаться из сложения этих величин с размерами блока content, и делать это будет нужно при каждом изменении размеров блока content. Есть исключения, но о них будет рассказано ниже.
Корректировка блока contentwrap с помощью js позволяет не обращать внимания на вид и версию браузера и используемую им толщину скроллбаров.

Блоки vscroll и hscroll

vscroll и hscroll — скроллбары. На данный момент, основная задача — «приклеить» их к краям и заставить их изменять свои размеры и местоположение их дочерних элементов за счет браузера:

в этом листинге нет ничего сложного и я перейду к более интересной части: бегунки.

Бегунки

Для успешной реализации функционала бегунков нужно рассмотреть следующие задачи:

  • изменение положения бегунка при прокрутке контента указанными выше способами
  • перетаскивание бегунка указателем мыши и реакция контента на эти действия
  • изменение размеров и сохранение позиции бегунка при изменении размеров контента относительно размеров компонента или при изменении размеров компонента (эта задача решается при обновлении параметров всего компонента и решение будет описано ниже)
Изменение положения бегунка при прокрутке контента

Это сделать крайне просто. Благодаря установленному свойству overflow:scroll у блока systemscrolls можно ловить собитие scroll на этом блоке, а уже при возникновении этого события двигать бегунок в зависимости от положения (свойства scrollLeft и scrollTop) контента относительно левой верхней точки блока systemscrolls с учетом коэффициента пропорциональности, который вычисляется в функции обновления параметров компонента (об этом будет ниже).

Перетаскивание бегунков

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

  • поймать событие mousedown на самом бегунке
  • подключить события mousemove и mouseup на элемент document
  • обрабатывать событие document.mousemove, тем самым изменяя положение бегунка и пролистывая контент
  • поймав событие document.mouseup — отключить события mousemove и mouseup на элемента document

Как можно заметить, алгоритм весьма простой, но есть один нюанс: изменение положения бегунков, точнее алгоритм изменения этого положения. Менять положение бегунков можно двумя способами:

  • событие scroll от элемента systemscrolls. Оно возникает следующим образом: чтобы пролистывать контент с помощью js, нужно изменять свойства scrollLeft и scrollTop у блока systemscrolls, а изменение этих свойств приведет к выбросу события scroll у этого блога. Таким образом сработает алгоритм по изменению положения бегунка при прокрутке контента, который описан выше.
  • после того, как будет поймано событие mousedown на бегунке, нужно отключить обработку события scroll на элементе systemscrolls, а элементы бегунков двигать по событию mousemove на элементе document одновременно пролистывая контент изменением свойств scrollLeft и scrollTop у блока systemscrolls.

На первый взгляд, первый способ кажется лучше, т.к. требует меньше усилий для реализации. Но недостатком этого способа является присутствующая обратная связь через событие systemscrolls.scroll (см. рисунок), из-за которой бегунок начинает заметно отставать от указателя мыши при быстром перемещении последнего. При этом, событие systemscrolls.scroll возникает всякий раз при изменении свойств scrollLeft и scrollTop у блока systemscrolls, вызывая функцию перемещения бегунков.

При втором способе можно получить гораздо лучший результат. Дополнительные операции по отсоединению и присоединению события systemscrolls.scroll происходят только два раза: на события mousemove и mouseup (соответственно) элемента document. Таким образом, обработка события document.mousemove происходить быстрее и оптимальнее (см. рисунок)

Обновление параметров компонента

Вот и дошло время до весьма важной функции — обновление параметров компонента. Для этой функции необходимо обеспечить скорость выполнения, т.к. она может вызываться при ресайзе и смене контента очень часто, поэтому большая часть её написана на чистом js. Ниже приведен кусок кода для обновления параметров по горизонтали:

Из этого листинга хочу уделить внимание именно куску кода «Корректировка ширины contentwrap», остальное понятно и без объяснения. Смысл этого куска в следующем:

  • в браузере расширеннее контента по вертикали имеет приоритет перед горизонталью — это значит, что если менять ширину окна браузера (а контент не имеет каких-либо жестких ограничений по ширине), то высота контента будет увеличиваться без ограничений, а ширина уменьшаться. По сути всё логично и дружелюбно к пользователю, т.к. наличие у окна браузера горизонтального скрола одновременно с вертикальным — это определенные неудобства, то лучше вытягивать контент по вертикали. Но когда речь идет об области прокрутки какого-нибудь элемента интерфейса, то хотелось бы, чтобы область горизонтальной прокрутки увеличивалась автоматически, когда это нужно. И вот этот код из 5ти строчек решает эту задачу: определяет, когда браузер может выстроить элементы по горизонтали и тогда производит расширение контента до нужных размеров.

Когда нужно обновлять параметры компонента?

  • инициализация
  • изменение размеров окна браузера
  • изменение контанта

Если первые два случая весьма прозрачны, то вот последний таит в себе подводные камни. Контент может меняться не только во время удаления или добавления каких-либо элементов, но и по завершению загрузки каких-нибудь картинок, если их размеры не заданы заранее, и т.д. Можно отлавливать все варианты событий onload, но это не стоит того. Самое оптимальное решение — setInterval(update, 300) — функция update будет запускаться каждые 300 мс, нагрузки на браузер почти никакой и все весьма надежно.

Кастомизация

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

Эта верстка вертикального скроллбара (для горизонтального всё подобно). Преимущество такой структуры следующие:

  • обобщающие классы scrollar-scroll, scrollar-btn, scrollar-track и scrollar-thumb позволяют задавать общие стили как для вертикального, так и для горизонтального скроллбаров (например, задав scrollar-btn < display: none;>можно скрыть кнопки);
  • scrollar-btn и scrollar-track фиксируются относительно родительского элемента scrollar-scroll, что позволяет изменять их положение и их размеры, а также размеры scrollar-scroll, за счет браузера;
  • элемент scrollar-track не требует стилизации, т.к. он предназначен для определения области движения бегунка scrollar-thumb, но при желании можно и к этому элементу применить стили;
  • элементы позиционируются абсолютно (position: absolute) относительно scrollar-scroll, что позволяет размещать их относительно друг друга весьма легко;

По сути, вся кастомизация сводится к написанию стилей. В конце статьи будут приведены ссылки на примеры кастомизации, а также ссылки на файлы стилей для этих примеров.

А если горизонтальный или вертикальный скрол не нужен?

Все просто: при инициализации компонента нужно указать какой скрол не нужен (по умолчанию — оба отображаются). Управление видимостью и скролов производится с помощью добавления или удаления классов. Также добавление этих классов влияет на размеры контента (например, при hscroll: false ширина контента будет меняться автоматически за счет нативного функционала браузера)

Как менять контент?

Есть функция content(«action», content), где action — функция jQuery по управлению содержимым (text, html, append, prepend…). Также эту функцию можно вызвать без параметров, тогда она вернет объект jQuery и с ним можно работать, в этом случае параметры компонента будут обновляться каждые 300 мс. Примеры:

  • content(«html», «Abcd») — заменит содержимое в области прокрутки на параграф с текстом, при этом обновление параметров компонента произойдет мгновенно, сразу по завершению функции;
  • content().html(«Abcd») — эффект будет таким же, как и в предыдущем примере, но обновление контента произойдет за счет setInterval, в крайнем случае можно принудительно вызвать функцию update()

Ссылки к статье:

Customization — на этой странице можно посмотреть несколько вариантов кастомизации, а также можно опробовать реакцию элемента прокрутки на изменение размеров окна браузера.
GitHub — репозиторий, где можно найти всё, что описывалось в статье
Default style — пример произвольной стилизации
Safari style — стилизация скроллбаров в стиле Mac OS 10.8

Scrollbar-base-color в CSS

CSS Codes and Examples

www.tagindex.net

scrollbar-***-color: ***;

The scrollbar-***-color property changes the color of the scrollbars.
( *** = base , face , track , arrow , highlight , shadow , 3dlight , and darkshadow )

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 <
scrollbar-base-color : #ff0000 ;
>

When you specify the detailed color

body <
scrollbar-face-color : #ff8c00 ;
scrollbar-track-color : #fff8dc ;
scrollbar-arrow-color : #ffffff ;
scrollbar-highlight-color : #fff8dc ;
scrollbar-shadow-color : #d2691e ;
scrollbar-3dlight-color : #ffebcd ;
scrollbar-darkshadow-color : #8b0000 ;
>

Property Value Explanation
scrollbar-base-color color code or name (1) the base color
scrollbar-face-color color code or name (2) the face color
scrollbar-track-color color code or name (3) the track color
scrollbar-arrow-color color code or name (4) the arrow color
scrollbar-highlight-color color code or name (5) the highlight color
scrollbar-shadow-color color code or name (6) the shadow color
scrollbar-3dlight-color color code or name (7) the 3D light color
scrollbar-darkshadow-color color code or name (8) the dark shadow color

The element to which the style should be applied

Standards mode : Apply these styles to the HTML element.
Quirks mode : Apply these styles to the BODY element.

Скроллбар

04.02.2013, 10:44

Скроллбар Google Chrome [New]
Здравствуйте, помогите пожалуйста, как сделать такой скроллбар на сайте, как у Google Chrome? .

Скроллбар для DIV
Всем привет. Использую CSS. ::-webkit-scrollbar < width: 12px; >.

Когда стилизовать скроллбар?
Заранее прошу прощения, если ошибся форумом, но посчитал что тут самое ему место. Разрабатываю.

Как кастомизировать скроллбар у селекта?
Как кастомизировать скроллбар у селекта? Селект в виде раскрывающегося списка с 24 пунктами.

Почему скроллбар не является границей сайта?
Расклад такой: Ширина хедера 960 пикселей. В хедере есть блок, который прижат к правому краю.

Кастомные скроллбары для IE, Chrome, Firefox используя только CSS

Используйте этот код для тегов вы можете стилизовать, или использовать его в теле, стилизовать все полосы прокрутки в документе. Если вы достаточно ленивы, чтобы настроить каждую самостоятельно, есть некоторые генераторы кода, этот генератор Custom Scrollbars Generator хороший.

Скроллбар в Chrome

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

Скроллбар в Firefox

200?’200px’:»+(this.scrollHeight+5)+’px’);»> @-moz-document url-prefix(http://),url-prefix(https://) <
scrollbar <
-moz-appearance: none !important;
background: rgb(0,255,0) !important;
>
thumb,scrollbarbutton <
-moz-appearance: none !important;
background-color: rgb(0,0,255) !important;
>

thumb:hover,scrollbarbutton:hover <
-moz-appearance: none !important;
background-color: rgb(255,0,0) !important;
>

scrollbarbutton <
display: none !important;
>

scrollbar[orient=»vertical»] <
min-width: 15px !important;
>
>

Scrollbar-base-color в CSS

Как можно убрать скролбар?
Прописал в css такую штуку:
BODY <
background-color: 677780;
scrollbar-face-color: 677780;
scrollbar-track-color: 677780;
scrollbar-arrow-color: 677780;
scrollbar-highlight-color: 677780;
scrollbar-shadow-color: 677780;
scrollbar-darkshadow-color: 677780;
scrollbar-base-color: 677780;
>
но всё равно хотелось бы что-нибудь попроще.
Если есть что-то типа или < scrollbar-visibility: hidden;>, то чирканите кто-нить как точно выглядят эти параметры…
Также интересует можно ли задать ширину скролбара в пикселах?
Пробовал — не катит.

На http://spravkaweb.ru/css.php я уже был, решения не нашёл.

Меню пользователя MYSTERION
Посмотреть профиль
Найти ещё сообщения от MYSTERION

Это не делается средствами css.
У окна браузера (в DOM-модели ) есть метод open; синтаксис его такой —
open(«URL»,»имя»,»параметры»)
где URL — адрес страницы окна, имя — имя окна, а в параметрах задаётся внешний вид окна. И среди этих параметров есть scrollbars.
Если делаешь pop-up — можешь не напрягаться, т.к. по умолчанию параметр scrollbars=no, т.е. полос прокрутки в открываемом методом open окне нет. Если же нужно, чтобы они были — задаёшь scrollbars=yes.
для иллюстрации сказанного — попробуй выполнить скрипт

14.12.2005, 01:18 [включить плавающее окно] #2
Меню пользователя Гхост-цзы
Посмотреть профиль
Найти ещё сообщения от Гхост-цзы

Гхост-цзы Спасибо конечно, но мне нужно главную страницу (index.) сделать без скролбара, хотя открытие страницы с заданым размером меня тоже интересовало, т.ч. благодарю.

Раз уж не делается, то будем довольствоваться таким способом, единственное что мне теперь нужно так это сместить немного таблицу выравненную по центру вправо (на половину ширины скролбара) чтоб визуально она чётко по центру была. В общем чтоб смещалась относительно центра, а не относительно верхнего левого угла. Подскажите как это сделать?

Илон Маск рекомендует:  Что такое код udm_find
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL
14.12.2005, 11:57 [включить плавающее окно] #3