Стилизация scrollbar css: Как стилизовать через css полосу прокрутки внутри блока? — Хабр Q&A

Изменить дизайн скроллбара на CSS для Chrome, Safari, Yandex и других браузеров

Довольно часто дизайнер предлагает добавить особые стили на скроллбар. По дизайну это выглядит красиво, но для разработчика это может быть дополнительной головной болью. В этой статье разберемся как изменить дизайн скроллбара на CSS для webkit-браузеров (Chrome, Safari, Yandex и др.).

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

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

Итак, в CSS для движка webkit есть несколько псевдоклассов:

::-webkit-scrollbar — вся панель прокрутки.
::-webkit-scrollbar-button — кнопки на панели прокрутки (стрелки, указывающие вверх и вниз).
::-webkit-webkit-scrollbar-thumb — перетаскиваемая ручка прокрутки.
::-webkit-scrollbar-track — полоса прокрутки (шкала прогресса) полосы прокрутки.
::-webkit-scrollbar-track-piece — часть дорожки (индикатор прогресса), не покрытая ручкой.
::-webkit-scrollbar-corner — нижний угол полосы прокрутки, где встречаются как горизонтальные, так и вертикальные полосы прокрутки.
::-webkit-resizer — перетаскиваемая ручка изменения размера, которая отображается в нижнем углу некоторых элементов.

 

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

 

Пример: 

524

Также рекомендуем:

CSS: современный способ оформления скроллбаров

Настройка полосы прокрутки (scrollbar) в основных браузерах была трудна и неприятна примерно до сентября 2018 года, когда был выпущен рабочий проект W3C CSS Scrollbars, который выглядит как реальный способ устранить трудности стилизации скроллбаров.

На протяжении многих лет появлялись различные способы сделать это. Microsoft Internet Explorer был одним из первых, кто предоставил CSS API для скроллбаров, но многие разработчики были настолько разочарованы реализацией, что создавали собственные решения с помощью JavaScript.

Однако, JavaScript-решения тоже не во всём идеальны, например им трудно эмулировать высокопроизводительное поведение, допустим, прокрутку с инерцией или прокрутку больших документов.

Перенесемся в настоящее время, теперь, когда Internet Explorer вытесняется Microsoft Edge, это сводится к двум подходам:

• Chrome/Edge/Safari используют -webkit-scrollbar
• Firefox использует новую спецификацию CSS Scrollbars API (т.е. scrollbar-color и scrollbar-width).

Давайте посмотрим на некоторые примеры кода!

Скроллбары в Chrome/Edge/Safari

В Chrome/Edge/Safari для стилизации прокрутки доступны css-свойства с вендорным префиксом -webkit-scrollbar.

body::-webkit-scrollbar {
  width: 12px;               /* ширина scrollbar */
}
body::-webkit-scrollbar-track {
  background: orange;        /* цвет дорожки */
}
body::-webkit-scrollbar-thumb {
  background-color: blue;    /* цвет плашки */
  border-radius: 20px;       /* закругления плашки */
  border: 3px solid orange;  /* padding вокруг плашки */
} 

Есть хорошие новости… И плохие новости…

Хорошие новости! Этот код прекрасно работает в последних выпусках Chrome/Edge/Safari!

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

Скроллбары в Firefox

Firefox — чемпион в использовании новых стандартов W3C, они всегда готовы попробовать новые API. Таким образом, новые функции CSS Scrollbars уже доступны в обычных выпусках Firefox:

body {
  scrollbar-width: thin;          /* "auto" или "thin"  */
  scrollbar-color: blue orange;   /* плашка скролла и дорожка */ 
} 

Здесь легко заметить несколько различий по сравнению с устаревшей спецификацией -webkit-scrollbar.

Во-первых, это лаконичный css-код! А во-вторых, в нём отсутствуют такие функции, как создание отступов и скруглений для плашки скролла. Поскольку спецификация всё ещё меняется, эти недостающие функции могут быть в неё включены.

Дальше-то, что?

Как стилизовать полосы прокрутки, с учётом отсутствия единого авторитетного API? Надо просто объединить оба подхода!

/* W3C standard
   сейчас только для Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

/* для Chrome/Edge/Safari */
*::-webkit-scrollbar {
  height: 12px;
  width: 12px;
}
*::-webkit-scrollbar-track {
  background: orange;
}
*::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 5px;
  border: 3px solid orange;
} 

Когда -webkit-scrollbar устареет, можете спокойно вернуться к новому стандарту CSS Scrollbars.

See this code CSS scrollbar on x.xhtml.ru.

Вариант с использованием настраиваемых CSS-свойств (CSS-переменные). В этом случае появляется возможность управлять настройками CSS-свойств полосы прокрутки из Javascript, например, для управления темами:

See this code Styling scrollbars with CSS on x.xhtml.ru.

Styling Scrollbars with CSS: The Modern Way to Style Scrollbars.

Пользовательская полоса прокрутки CSS для Firefox

Firefox 64 добавлена поддержка спецификации проекта CSS Scrollbars Module Level 1 , который добавляет два новых свойства из scrollbar-widthи scrollbar-colorкоторые дают некоторый контроль над тем, как отображаются полосы прокрутки.

Вы можете установить scrollbar-colorодно из следующих значений (описания из MDN):

• auto Рендеринг платформы по умолчанию для дорожки части полосы прокрутки при отсутствии каких-либо других связанных свойств цвета полосы прокрутки.
• dark Показать темную полосу прокрутки, которая может быть либо темным вариантом полосы прокрутки, предоставляемой платформой, либо настраиваемой полосой прокрутки с темными цветами.
• light Показать светлую полосу прокрутки, которая может быть либо легкой версией полосы прокрутки, предоставляемой платформой, либо настраиваемой полосой прокрутки со светлыми цветами.
• <color> <color> Применяет первый цвет к ползунку полосы прокрутки, второй — к дорожке полосы прокрутки.

Обратите внимание, что darkи lightзначения в настоящее время не реализованы в Firefox .

примечания macOS:

Автоматически скрывающие полупрозрачные полосы прокрутки, используемые по умолчанию в macOS, не могут быть окрашены этим правилом (они по-прежнему выбирают свой собственный контрастный цвет на основе фона). Только постоянно отображаемые полосы прокрутки (Системные настройки> Показать полосы прокрутки> Всегда) окрашены.

Визуальная демонстрация:

.scroll {
  width: 20%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-color-auto {
  scrollbar-color: auto;
}
.scroll-color-dark {
  scrollbar-color: dark;
}
.scroll-color-light {
  scrollbar-color: light;
}
.scroll-color-colors {
  scrollbar-color: orange lightyellow;
}

<div>
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>

<div>
<p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p>
</div>

<div>
<p>light</p><p>light</p><p>light</p><p>light</p><p>light</p><p>light</p>
</div>

<div>
<p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p>
</div> 

Вы можете установить scrollbar-width

одно из следующих значений (описания из MDN):

• auto Ширина полосы прокрутки по умолчанию для платформы.
• thin Тонкий вариант ширины полосы прокрутки на платформах, которые предоставляют эту опцию, или более тонкая полоса прокрутки, чем ширина полосы прокрутки платформы по умолчанию.
• none Полоса прокрутки не отображается, однако элемент все еще можно прокручивать.

Вы также можете установить конкретное значение длины, в соответствии со спецификацией. И thinта, и другая длина могут ничего не делать на всех платформах, и что именно она делает, зависит от платформы. В частности, Firefox, похоже, в настоящее время не поддерживает определенное значение длины ( этот комментарий к их баг-трекеру, кажется, подтверждает это ).

thinKeywork действительно , кажется, хорошо поддерживается , однако, с MacOS и поддержки Windows , в- крайней мере.

Вероятно, стоит отметить, что опция значения длины и все scrollbar-widthсвойство рассматриваются для удаления в будущем проекте, и если это произойдет, это конкретное свойство может быть удалено из Firefox в будущей версии.

Визуальная демонстрация:

.scroll {
  width: 30%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-width-auto {
  scrollbar-width: auto;
}
.scroll-width-thin {
  scrollbar-width: thin;
}
.scroll-width-none {
  scrollbar-width: none;
}
 

<div>
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>

<div>
<p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p>
</div>

<div>
<p>none</p><p>none</p><p>none</p><p>none</p><p>none</p><p>none</p>
</div>

Стилизация полосы прокрутки CSS с помощью JavaScript и не только: примеры решений

От автора: если вам нужна стилизация полосы прокрутки CSS прямо сейчас, одним из вариантов является использование набора свойств с префиксом ::webkit.

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

Но если этого достаточно для того, что вам нужно, вы можете сделать это довольно стильно:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

На CodePen есть множество примеров. Также неплохо абстрагироваться с помощью Sass@mixin.

На этом фронте есть хорошие новости! Основы стандартов, которые должны воплотиться в методы стандартизации для стилей полос прокрутки, уже начали реализоваться с желобов (или ширины). Главное свойство будет scrollbar-gutter, и Джефф описал его здесь. Надеюсь, Autoprefixer поможет нам, когда спецификация будет завершена, и браузеры начнут ее реализовывать, чтобы мы могли писать стандартизированную версию и получать из нее любые префиксные версии.

Но что, если нам понадобится кросс-браузерная поддержка? Если вам нужны стильные полосы прокрутки (и я вас понимаю), то вам, вероятно, придется искать JavaScript решение. Для этого должны быть десятки библиотек. Я наткнулся на simplebar, и она выглядит как довольно современная. Вот ее демонстрация:

Вот еще одна простая полоса прокрутки:

Дас Шурма написал очень интересное руководство, в нем создается собственная полоса прокрутки, которая на самом деле при прокрутке не требует JavaScript (хорошо для перфорирования), но требует установки некоторого кода JavaScript.

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

Я вставлю экземпляр здесь:

Автор: Chris Coyier

Источник: //css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Изменение полосы прокрутки css | Gadget-apple.ru

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

Дата публикации: 2018−12−24

От автора: если вам нужна стилизация полосы прокрутки CSS прямо сейчас, одним из вариантов является использование набора свойств с префиксом ::webkit.

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

Но если этого достаточно для того, что вам нужно, вы можете сделать это довольно стильно:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

На CodePen есть множество примеров. Также неплохо абстрагироваться с помощью Sass@mixin.

На этом фронте есть хорошие новости! Основы стандартов, которые должны воплотиться в методы стандартизации для стилей полос прокрутки, уже начали реализоваться с желобов (или ширины). Главное свойство будет scrollbar-gutter, и Джефф описал его здесь. Надеюсь, Autoprefixer поможет нам, когда спецификация будет завершена, и браузеры начнут ее реализовывать, чтобы мы могли писать стандартизированную версию и получать из нее любые префиксные версии.

Но что, если нам понадобится кросс-браузерная поддержка? Если вам нужны стильные полосы прокрутки (и я вас понимаю), то вам, вероятно, придется искать JavaScript решение. Для этого должны быть десятки библиотек. Я наткнулся на simplebar, и она выглядит как довольно современная. Вот ее демонстрация:

Дас Шурма написал очень интересное руководство, в нем создается собственная полоса прокрутки, которая на самом деле при прокрутке не требует JavaScript (хорошо для перфорирования), но требует установки некоторого кода JavaScript.

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

Я вставлю экземпляр здесь:

Автор: Chris Coyier

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Перевод: Влад Мержевич

Вернёмся назад, когда вы могли настроить скроллбары в IE (5.5) с помощью нестандартных свойств типа scrollbar-base-color , которые применялись к элементам с полосами прокрутки (вроде body ), и делать потрясные штуки. IE теперь не тот.

В наши дни пользовательские скроллбары вернулись, но теперь наступило время WebKit. Это несколько лучше, поскольку свойства содержат вендорный префикс (например ::-webkit-scrollbar ) и используют «Shadow DOM». Всё это работает уже несколько лет. Дэвид Хаятт в начале 2009 года показал в своём блоге пример страницы со всевозможными полосами прокрутки, о которых вы могли только мечтать.

Необходимое

Разные части

Вот псевдоэлементы, отвечающие за разные части полос прокрутки.

Различные состояния

Это псевдоселекторы, они позволяют точнее выбирать разные части полосы прокрутки, когда они находятся в различных состояниях.

Я украду целый раздел с поста Дэвида из блога WebKit, потому что он хорошо объясняет каждую часть.

:horizontal — применяется к любому скроллбару, который имеет горизонтальную ориентацию.

:vertical — применяется к любому скроллбару, который имеет вертикальную ориентацию.

:decrement — применяется к кнопкам и к видимой части трека, сообщает, что нет кнопок или видимая часть трека уменьшена в процессе использования (вверх для вертикального скроллбара и влево для горизонтального).

:increment — применяется к кнопкам и к видимой части трека, сообщает, что нет кнопок или видимая часть трека увеличена в процессе использования (вниз для вертикального скроллбара и вправо для горизонтального).

:start — применяется к кнопкам и к видимой части трека, сообщает, что объект находится перед ползунком.

:end — применяется к кнопкам и к видимой части трека, сообщает, что объект находится после ползунка.

:double-button — применяется к кнопкам и к видимой части трека, используется для определения того, что кнопка является частью пары кнопок, которые находятся вместе в конце скроллбара. Для видимой части трека сообщает, что она примыкает к паре кнопок.

:single-button — применяется к кнопкам и к видимой части трека, используется для определения того, что кнопка в конце скроллбара единственная. Для видимой части трека сообщает, что он примыкает к этой единственной кнопке.

:no-button — применяется к видимой части трека, сообщает, что видимая часть трека приближается к краю скроллбара, другими словами, нет кнопки в конце трека.

:corner-present — применяется ко всем элементам скроллбара и сообщает, что имеется уголок.

:window-inactive — применяется ко всем элементам скроллбара и сообщает, что окно со скроллбаром в данный момент активно. В последних версиях этот псевдокласс хорошо сочетается с ::selection. Мы планируем расширить его работу для любого контента и предложить в качестве нового стандартного псевдокласса.

Теперь всё вместе

Эти псевдоэлементы и псевдоклассы работают совместно. Вот несколько случайных примеров.

Очень простой пример

Чтобы сделать действительно простой пользовательский скроллбар мы добавим это.

И получим следующий результат на простом

В диких условиях

Отмечу очень тонкий и симпатичный скроллбар в блоге Тима Ван Дамма Maxvoltar (сайт Тима больше не использует этот дизайн).

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

На Forrst используются пользовательские скроллбары для фрагментов кода, которые также довольно хороши. Они визуально менее насыщенные, из-за чего не очень сочетаются с подсветкой кода.

НАШ САЙТ РЕКОМЕНДУЕТ:

Метки:

JS scrollbar, стилизация скроллбара

Жутко не люблю JS, но без него порой никуда, т.к. не всегда есть изящные решения базирующиеся исключительно на css и html.

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

Ни для кого не секрет, что с помощью css можно задать цвет скроллбара для браузеров Opera и IE начиная с версии 5. А другие браузеры эти свойства просто не поддерживают, т.к. они не соответсвутют W3C стандартам на данный момент.

И тут для изменения дизайна скроллбара на помощь приходит JS. На данный момент решений, которые справляются с подобной задачей достаточно много, но мне больше всех понравился fleXcroll, the scroll bar customize script проекта HESIDO.

Скрипт является бесплатным для некоммерческого использования, а при использование скрипта на коммерческих сайтах придется заплатить 30$ за размещение скрипта на одном сайте или 70$ за неограниченное использование скрипта.

Больше всего из предложенных версий мне понравился минималистичный вариант скролла, который и прикладываю в архиве:

Следует отметить, что при использование свойств float для div контейнеров внутри скролла, высота скролла задается, как высота последнего контейнера в коде, что затрудняет использование скрипта, я вылечил это тем, что поместил float div`ы в таблицу:

1. <table><tr><td>

2. <div></div>

3. <div></div>

4. </td></tr></table>

К достоинствам скрипта можно отнести, то что с отключенным JS, скроллбар отрисовывается браузером, что сохраняет функционал сайта.

лучшие пользовательские плагины браузера javascript и jQuery плагины

Полоса прокрутки является единственным компонентом окна, который вы не можете настроить по своему желанию с помощью css (по крайней мере, не в Firefox, т. Е. В Opera и т. Д.), Поэтому вам необходимо реализовать эту функцию с помощью Javascript.

Но есть много вариантов, которые могут перейти к моему дизайну? Посмотрите нашу коллекцию из 7 лучших плагинов полосы прокрутки, написанных на Javascript или jQuery.

Github | демонстрация

Tiny Scrollbar — это красивый и элегантный способ прокрутки контента на мобильных и настольных устройствах. Это разработано, чтобы быть динамической легкой утилитой. Кроме того, он предоставляет конструктору пользовательских интерфейсов мощный способ улучшить пользовательский интерфейс (веб-интерфейс) веб-сайта.

Он написан как ванильный Javascript microlib и как плагин jQuery.

Поддержка браузера отличается между плагином jQuery и простой микровибой Javascript. В частности, простая микровиб Javascript не поддерживает устаревшие браузеры, такие как IE6-8. Используйте релиз плагина jQuery, если требуется поддержка этих браузеров.

• Поддержка IOS и Android.
• Доступен как плагин jQuery и ванильный микролиб Javascript.
• Поддержка AMD, Node, requirejs и commonjs.
• Можно прокрутить вертикально или горизонтально.
• Поддерживает прокрутку с помощью колеса, большого пальца, трека или касания.
• У него есть метод обновления, поэтому он может обрабатывать (асинхронные) изменения содержимого.
• Размер дорожки и большого пальца можно установить на авто или фиксированное число.
• Легко настраиваемый.
• Поддерживает обычную и мобильную инвертированную прокрутку.
• Примеры можно увидеть на этой странице, загрузив zip или Вот.
• Легкий, маленький и чистый код.

Github | демонстрация

SlimScroll — это небольшой (4,6 КБ) и настраиваемый плагин jQuery, который превращает любой div в область с возможностью прокрутки и имеет красивую полосу прокрутки — похожую на ту, которую Facebook и Google начали использовать в своих продуктах недавно. SlimScroll не занимает визуальное пространство, так как он появляется только при наведении мышью на пользователя. Пользователь может перетащить полосу прокрутки или использовать колесико мыши, чтобы изменить значение прокрутки.

Github | демонстрация

Enscroll — это плагин jQuery, который дает вам возможность заменить полосы прокрутки, отображаемые в веб-браузере, на те, которые вы разрабатываете. Либо замените полосы прокрутки своим собственным изображением, либо используйте пользовательский CSS, чтобы придать им стиль в любом случае.

Github | демонстрация

jScrollPane — это кросс-браузерный плагин jQuery от Kelvin Luck, который преобразует полосы прокрутки браузера по умолчанию (для элементов с соответствующим свойством переполнения) в структуру HTML, которую можно легко создать с помощью CSS.

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

Github | демонстрация

perfect-scrollbar — это минималистичный плагин для полосы прокрутки, который также работает с jQuery или vanilla JavaScript.

• perfect-scrollbar имеет некоторые требования, но не меняет и не добавляет стиль оригинальным элементам.
• perfect-scrollbar не имеет ширины или высоты. Он фиксируется на правой и нижней стороне контейнера.
• Вы можете изменить почти все стили CSS на полосе прокрутки. Дизайн полосы прокрутки не зависит от сценариев.
• perfect-scrollbar поддерживает функцию обновления. Всякий раз, когда вам нужно обновить размер или положение полосы прокрутки, просто обновите.
• Кроме того, perfect-scrollbar использует scrollTop и scrollLeft, а не абсолютное позиционирование или что-то грязное.
• perfect-scrollbar прекрасно поддерживает RTL как в браузерах на базе WebKit, так и в Gecko.

Gtihub | демонстрация

Nicescroll 3 — это плагин jquery для красивых полос прокрутки с очень похожим стилем ios / mobile. Также поддерживает горизонтальную полосу прокрутки, простое в использовании решение для создания настраиваемых полос прокрутки, совместимых с устройствами destkop, tablet и phone. Поддерживает div's, iframes, textareaи полосы прокрутки страницы документа (тела).

• Простая установка и активация, она работает без модификации вашего кода.
• Очень стильные полосы прокрутки, не занимающие вашего окна (оригинальные полосы прокрутки браузера требуют некоторого пространства страницы и уменьшают полезную ширину окна / деления).
• Вы можете стилизовать полосу прокрутки основного документа (тело).
• Во всех браузерах вы можете прокручивать: перетаскивание курсора, колесико мыши (скорость настраивается), навигация с помощью клавиатуры (клавиши курсора, клавиши pagup / down, клавиши home / end).
• Прокрутка плавная (как у современных планшетов), скорость настраиваемая.
• Функция масштабирования.
• Аппаратная ускоренная прокрутка (при наличии).
• Поддержка кадров анимации для простой прокрутки и сохранения процессора.
• режим перетаскивания с прокруткой импульса (в качестве сенсорного устройства).
• Протестировано для всех основных браузеров настольных и мобильных версий.
• Поддержка сенсорных устройств.
• Поддержка устройств с несколькими входами (IE10 с MSPointer).
• Совместим со многими другими браузерами, включая IE6, Safari на Mac и WP7 Mango.
• Очень настраиваемый аспект бара.
• Нативные события прокрутки еще работают.
• Полностью интегрирован с JQuery.
• Совместимость с jQuery UI, jQuery Touch, jQuery Mobile.

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

Github | демонстрация

Полоса прокрутки jQuery — это настраиваемая CSS-панель прокрутки с расширенными возможностями:

• Легко реализовать.
• Нет фиксированной высоты или ширины.
• Адаптивная поддержка дизайна.
• CSS настраиваемый.
• Стандартное поведение прокрутки.
• Вертикальная, горизонтальная или обе полосы прокрутки.
• Автоматически повторно инициализировать полосу прокрутки.
• Поддержка внешних полос прокрутки.
• Поддержка браузера: IE7 +, Firefox1, Opera, Chrome, Safari.
• jQuery Scrollbar как Angular.JS директива.
• Полоса прокрутки текстовой области.
• Функция карты страницы.

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

цвет полосы прокрутки | CSS-уловки

Свойство scrollbar-color управляет двумя цветами полосы прокрутки: цветом ползунка и цветом дорожки . scrollbar-color является частью проекта уровня 1 модуля полос прокрутки рабочей группы CSS, работа над которым на момент написания этой статьи еще не завершена.

До scrollbar-color у разработчиков не было стандартного способа изменить внешний вид полос прокрутки браузера по умолчанию, не прибегая к скрытию полосы прокрутки с помощью переполнения : скрыто и рендеринга полос прокрутки на основе JavaScript или использования атрибутов полосы прокрутки с префиксом браузера.С другой стороны, с scrollbar-color мы можем стилизовать полосу прокрутки в соответствии с дизайном, не прибегая к повторному использованию функций браузера или использованию префиксов поставщиков.

  .scrollable-element {
  цвет полосы прокрутки: красный желтый;
}  

Не бойтесь настраивать цвета

scrollbar-color также принимает значения dark и light , чтобы соответствовать предпочтениям пользователя, если они используют что-то вроде темного режима в Mac OSX.

 .scrollable-element {
  цвет полосы прокрутки: темный;
}  

По состоянию на март 2019 года поддержка значений dark и light недоступна ни в одном браузере. поддерживается в Firefox. См. Подробности в разделе поддержки браузера ниже.

Синтаксис

  цвет полосы прокрутки: авто | темный | свет | <цвет>;  

Значения

scrollbar-color принимает следующие значения:

• auto является значением по умолчанию и будет отображать стандартные цвета полосы прокрутки для пользовательского агента.
• dark укажет пользовательскому агенту использовать более темные полосы прокрутки для соответствия текущей цветовой схеме.
• light укажет агенту пользователя использовать более светлые полосы прокрутки для соответствия текущей цветовой схеме.
• <цвет> определяет два цвета, которые будут использоваться для полосы прокрутки. Первый цвет предназначен для «большого пальца» или подвижной части полосы прокрутки, которая появляется сверху. Второй цвет предназначен для «дорожки» или фиксированной части полосы прокрутки.

Пример

Он сочетает в себе новый синтаксис спецификации и префикс WebKit.

Поддержка браузера

Desktop

Chrome	Firefox	IE	Edge	Safari
92 *	88	11	89 *	TP *

Мобильный / планшет

Android Chrome	Android Firefox	Android	iOS Safari
88 *	Нет	81 *	14.0-14,4 *

Связанные

ресурса

ширина полосы прокрутки | CSS-уловки

Свойство scrollbar-width в CSS управляет шириной или «толщиной» полосы прокрутки. scrollbar-width является частью проекта уровня 1 модуля полос прокрутки рабочей группы CSS, работа над которым еще не завершена. На момент написания этой статьи консенсус был в том, что ширины полосы прокрутки , вероятно, будет включен в будущие версии CSS, но есть споры о том, будет ли разрешен аргумент переменной , или будут ли параметры ограничены предварительно установленными значениями (подробнее об этом позже).

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

Например, представьте себе интерфейс редактирования текста, в котором </code> должен уместиться в коротком узком контейнере. В такой ситуации полоса прокрутки может занимать большую часть доступного места: </p> <code> <textarea> </code> с шириной полосы прокрутки <code>: авто; </code> <p> С <code> шириной полосы прокрутки </code>, мы можем установить ширину <code> тонких </code>, чтобы сэкономить место: </p><pre rel="CSS" data-line=""> <code markup="tt">.scrollable-element { ширина полосы прокрутки: тонкий; } </code> </pre><code> textarea </code> с шириной полосы прокрутки <code>: тонкая; </code> <p> Или мы можем установить ширину <code> none </code>, чтобы удалить ее полностью, сэкономив еще больше места (при условии, что у нас все в порядке с исчезновением полосы прокрутки): </p><pre rel="CSS" data-line=""> <code markup="tt"> .scrollable-element { ширина полосы прокрутки: нет; } </code> </pre><code> textarea </code> с шириной полосы прокрутки <code>: нет; </code> — и еще можно листать! <h4><span class="ez-toc-section" id="i-19"> Синтаксис </span></h4><pre rel="CSS" data-line=""> <code markup="tt"> ширина полосы прокрутки: авто | тонкий | нет | <длина>; </code> </pre><h4><span class="ez-toc-section" id="i-20"> Значения </span></h4> <p> <code> ширина полосы прокрутки </code> принимает следующие значения: </p> <ul> <li> <code> auto </code> является значением по умолчанию и будет отображать стандартные полосы прокрутки для пользовательского агента.</li> <li> <code> thin </code> укажет агенту пользователя использовать более тонкие полосы прокрутки, если это применимо. </li> <li> <code> нет </code> полностью скроет полосу прокрутки, не влияя на прокручиваемость элемента. </li> <li> <code> <длина> </code> обсуждается, но (если добавлено) будет максимальная ширина полосы прокрутки. </li> </ul> <h4><span class="ez-toc-section" id="i-21"> Пример </span></h4> <h4><span class="ez-toc-section" id="i-22"> Поддержка браузера </span></h4> <p> Это для общей настройки полос прокрутки. Чтобы узнать, как лучше всего оформить кроссбраузерную полосу прокрутки, см. Здесь.</p> <h5><span class="ez-toc-section" id="Desktop-2"> Desktop </span></h5> <table> <thead> <tr> <th> Chrome </th> <th> Firefox </th> <th> IE </th> <th> Edge </th> <th> Safari </th> </tr> </thead> <tbody> <tr> <td title="Chrome - "> 92 * </td> <td title="Firefox - "> 88 </td> <td title="IE - "> 11 </td> <td title="Edge - "> 89 * </td> <td title="Safari - "> TP * </td> </tr> </tbody> </table> <h5><span class="ez-toc-section" id="i-23"> Мобильный / планшет </span></h5> <table> <thead> <tr> <th> Android Chrome </th> <th> Android Firefox </th> <th> Android </th> <th> iOS Safari </th> </tr> </thead> <tbody> <tr> <td title="Android Chrome - "> 88 * </td> <td title="Android Firefox - "> Нет </td> <td title="Android - "> 81 * </td> <td title="iOS Safari - "> 14.0-14,4 * </td> </tr> </tbody> </table> <h4><span class="ez-toc-section" id="i-24"> Связанные </span></h4> <h4><span class="ez-toc-section" id="i-25"> ресурса </span></h4> <h2><span class="ez-toc-section" id="i-26"> Текущее состояние полос прокрутки стилей </span></h2> <p> Если вам нужно прямо сейчас стилизовать полосы прокрутки, можно использовать набор свойств CSS с префиксом <code> :: webkit </code>. </p> <p> К сожалению, это не очень помогает Firefox или Edge или экосистеме браузеров вокруг них. </p> <p> Обновление <strong>, ноябрь 2019 г .: Стандарты </strong> активизировались и предоставили нам цвет полосы прокрутки и ширину полосы прокрутки, и Firefox уже поддерживает их.Лучше всего сейчас, вероятно, использовать их и <em> объединить </em> их с материалом <code> :: webkit-scrollbar </code>. Демо позже в этой статье. </p> <p> Но если этого достаточно для того, что вам нужно, вы можете стать довольно стильным: </p> <p> На CodePen их множество, чтобы просмотреть. Также приятно абстрагироваться с помощью Sass <code> @mixin </code>. </p> <p> На этом фронте хорошие новости! Будущие органы стандартов перешли к стандартизации методов стилизации полос прокрутки, начиная с их желоба (или ширины).Основным свойством будет <code> полоса прокрутки-желоб </code>, и Джефф написал это здесь. Надеюсь, Autoprefixer поможет нам, когда спецификация будет завершена и браузеры начнут ее реализовывать, чтобы мы могли начать писать стандартизованную версию и получать из нее любые версии с префиксом. </p> <p> Но что, если нам нужна кроссбраузерная поддержка? </p> <p> Если стилизованные полосы прокрутки необходимы (и я вас не виню), вам, вероятно, придется обратиться к решению JavaScript. Для этого должны быть десятки библиотек.Я наткнулся на simplebar, и он выглядит довольно современным с легким экземпляром. Вот демонстрация этого: </p> <p> Вот еще одна полоса прокрутки: </p> <p> Дас Сурма создал очень интересный учебник, который создает настраиваемую полосу прокрутки, которая на самом деле не требует никакого JavaScript при прокрутке (хорошо для перфоманса), но требует некоторого установочного кода JavaScript. </p> <blockquote> <p> Пользовательские полосы прокрутки встречаются крайне редко, в основном из-за того, что полосы прокрутки являются одним из оставшихся фрагментов в Интернете, которые в значительной степени нестабильны (я смотрю на вас, средство выбора даты).Вы можете использовать JavaScript для создания своего собственного, но это дорого, с низкой точностью воспроизведения и может показаться медленным. В этой статье мы будем использовать некоторые нетрадиционные матрицы CSS для создания настраиваемого скроллера, который не требует никакого JavaScript во время прокрутки, а только немного кода настройки. </p> </blockquote> <p> Я прикреплю копию сюда: </p> <h4><span class="ez-toc-section" id="_Firefox_Safari_Chrome"> Обновленная версия довольно последовательно оформленной полосы прокрутки в Firefox / Safari / Chrome </span></h4> <h2><span class="ez-toc-section" id="i-27"> Как создать собственную полосу прокрутки </span></h2> <hr/> <p> Узнайте, как создать собственную полосу прокрутки с помощью CSS.</p> <hr/> <h3><span class="ez-toc-section" id="i-28"> Пользовательские полосы прокрутки </span></h3> <p> <strong> Примечание: </strong> Пользовательские полосы прокрутки не поддерживаются в Firefox или в Edge, предыдущая версия 79. </p> <hr/> <h3><span class="ez-toc-section" id="i-29"> Как создавать собственные полосы прокрутки </span></h3> <p> Chrome, Edge, Safari и Opera поддерживают нестандартный псевдоэлемент <code> :: - webkit-scrollbar </code>, который позволяет нам изменять внешний вид полосы прокрутки браузера. </p> <p> В следующем примере создается тонкая (шириной 10 пикселей) полоса прокрутки с серой дорожкой / полосой. цвет и темно-серая (# 888) ручка: </p> <h4><span class="ez-toc-section" id="i-30"> Пример </span></h4> / * ширина * / <br/> :: — webkit-scrollbar {<br/> width: 10px; <br/>} <p> / * Колея * / <br/> :: — webkit-scrollbar-track {<br/> background: # f1f1f1; <br/>} </p> <p> / * Ручка * / <br/> :: — webkit-scrollbar-thumb {<br/> background: # 888; <br/>} </p> <p> / * Обработка при наведении * / <br/> :: — webkit-scrollbar-thumb: hover {<br/> фон: # 555; <br/>} </p> Попробуй сам » <p> В этом примере создается полоса прокрутки с тенью блока: </p> <h4><span class="ez-toc-section" id="i-31"> Пример </span></h4> / * ширина * / <br/> :: — webkit-scrollbar {<br/> width: 20px; <br/>} <p> / * Колея * / <br/> :: — webkit-scrollbar-track {<br/> box-shadow: inset 0 0 5px серый; <br/> радиус границы: 10 пикселей; <br/>} </p> <p> / * Ручка * / <br/> :: — webkit-scrollbar-thumb {<br/> фон: красный; <br/> радиус границы: 10 пикселей; <br/>} </p> Попробуй сам » <hr/> <h3><span class="ez-toc-section" id="i-32"> Селекторы полосы прокрутки </span></h3> <p> Для браузеров webkit вы можете использовать следующие псевдоэлементы для настройки полосы прокрутки браузера: </p> <ul> <li> <code> :: - webkit-scrollbar </code> полоса прокрутки.</li> <li> <code> :: - webkit-scrollbar-button </code> кнопки на полосе прокрутки (стрелки указывают вверх и вниз). </li> <li> <code> :: - webkit-scrollbar-thumb </code> перетаскиваемый маркер прокрутки. </li> <li> <code> :: - webkit-scrollbar-track </code> трек (индикатор выполнения) полосы прокрутки. </li> <li> <code> :: - webkit-scrollbar-track-piece </code> трек (индикатор выполнения), НЕ перекрытый ручкой. </li> <li> <code> :: - webkit-scrollbar-corner </code> нижний угол полосы прокрутки, где и горизонтально, и встречаются вертикальные полосы прокрутки.</li> <li> <code> :: - webkit-resizer </code> перетаскиваемый маркер изменения размера, который появляется в нижнем углу некоторых элементов. </li> </ul> <br/> <br/> <h2><span class="ez-toc-section" id="scrollbar-color_CSS"> scrollbar-color — CSS: каскадные таблицы стилей </span></h2> <p> Свойство CSS <strong> <code> scrollbar-color </code> </strong> CSS устанавливает цвет полосы прокрутки и бегунка. </p> <p> Дорожка <strong> </strong> относится к фону полосы прокрутки, который обычно фиксируется независимо от положения прокрутки. </p> <p> Ползунок <strong> </strong> относится к подвижной части полосы прокрутки, которая обычно плавает поверх дорожки.</p> <p> Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос. </p><pre> <code> цвет полосы прокрутки: авто; цвет полосы прокрутки: темный; цвет полосы прокрутки: светлый; цвет полосы прокрутки: rebeccapurple green; цвет полосы прокрутки: наследовать; цвет полосы прокрутки: начальный; цвет полосы прокрутки: не установлен; </code> </pre><h4><span class="ez-toc-section" id="i-33"> Значения </span></h4> <dl> <dt> <code> <цвет полосы прокрутки> </code> </dt> <dd> Определяет цвет полосы прокрутки.<table> <tbody> <tr> <td> <code> авто </code> </td> <td> Отрисовка платформы по умолчанию для дорожки полосы прокрутки при отсутствии других связанных свойств цвета полосы прокрутки. </td> </tr> <tr> <td> <code> темный </code> </td> <td> Показать темную полосу прокрутки, которая может быть темным вариантом полосы прокрутки, предоставляемой платформой, или настраиваемой полосой прокрутки с темными цветами. </td> </tr> <tr> <td> <code> свет </code> </td> <td> Показать светлую полосу прокрутки, которая может быть либо облегченным вариантом полосы прокрутки, предоставляемой платформой, либо настраиваемой полосой прокрутки светлых цветов.</td> </tr> <tr> <td> <code> <цвет> <цвет> </code> </td> <td> Применяет первый цвет к ползунку полосы прокрутки, второй — к дорожке полосы прокрутки. </td> </tr> </tbody> </table> <p> <strong> Примечание </strong>: Пользовательские агенты должны применять любое значение <code> scrollbar-color </code>, установленное для корневого элемента, к области просмотра. </p> </dd> </dl><pre> <code> авто | темный | свет | <цвет> {2}, где <цвет> = <rgb ()> | <rgba ()> | <hsl ()> | <hsla ()> | <шестнадцатеричный цвет> | <имя-цвета> | текущий цвет | <цвет устаревшей системы>, где <rgb ()> = rgb (<процент> {3} [/ <альфа-значение>]?) | rgb (<число> {3} [/ <альфа-значение>]?) | rgb (<процент> # {3}, <альфа-значение>?) | rgb (<число> # {3}, <альфа-значение>?) <rgba ()> = rgba (<процент> {3} [/ <альфа-значение>]?) | rgba (<число> {3} [/ <альфа-значение>]?) | rgba (<процент> # {3}, <альфа-значение>?) | rgba (<число> # {3}, <альфа-значение>?) <hsl ()> = hsl (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsl (<оттенок>, <процент>, <процент>, <альфа-значение>?) <hsla ()> = hsla (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsla (<оттенок>, <процент>, <процент>, <альфа-значение>?), где <альфа-значение> = <число> | <процент> <оттенок> = <число> | <angle> </code> </pre><h4><span class="ez-toc-section" id="i-34"> Цветные полосы прокрутки переполнения </span></h4> <h5><span class="ez-toc-section" id="CSS-2"> CSS </span></h5><pre> <code>.scroller { ширина: 300 пикселей; высота: 100 пикселей; переполнение-y: прокрутка; цвет полосы прокрутки: rebeccapurple green; } </code> </pre><h5><span class="ez-toc-section" id="HTML"> HTML </span></h5><pre> <code> <div> Veggies es бонус vobis, proinde vos postulo essum magis кольраби валлийский лук дайкон амарант татсой томатилло дыня адзуки фасоль чеснок. Гамбо свекольная зелень кукуруза соко эндивий гамбо тыква. Петрушка-шалот, кабачок, тацой, ростки гороха, фасоль, листовая капуста, одуванчик, бамия, помидор. Одуванчик огурец земляной орех горох арахис соко кабачки.</div> </code> </pre><h5><span class="ez-toc-section" id="i-35"> Результат </span></h5> <p> таблицы BCD загружаются только в браузере </p> <h2><span class="ez-toc-section" id="CSS_Scrollbars_Module_Level_1"> CSS Scrollbars Module Level 1 </span></h2> CSS Scrollbars Module Level 1 <h3><span class="ez-toc-section" id="i-36"> Абстрактные </span></h3> <p> CSS Scrollbars стандартизирует возможность стилизации элементов управления полос прокрутки, таких как их цвет, представленный в 2000 году Windows IE 5.5. Это полезно при создании веб-приложений, использующих цветовые схемы, сильно отличающиеся от появление полос прокрутки платформы по умолчанию.</p> CSS — это язык для описания рендеринга структурированных документов. (например, HTML и XML) на экране, на бумаге и т. д. <h3><span class="ez-toc-section" id="i-37"> Статус этого документа </span></h3> <p> Это общедоступная копия редакционного черновика. Он предназначен только для обсуждения и может измениться в любой момент. Его публикация здесь не означает одобрения его содержания со стороны W3C. Не цитируйте этот документ иначе, как в незавершенной работе. </p> <p> Пожалуйста, отправьте отзыв путем регистрации проблем в GitHub (предпочтительно), включая код спецификации «css-scrollbars» в заголовок, например: «[Css-scrollbars] <i>… сводка комментария… </i>».Все вопросы и комментарии хранятся в архиве. Кроме того, отзывы можно отправить в (заархивированный) общедоступный список рассылки www-style@w3.org. </p> <p> Этот документ регулируется Документом процесса W3C от 15 сентября 2020 года. </p> <h3><span class="ez-toc-section" id="i-38"> Содержание </span></h3> <ol role="directory"> <li> 1. Введение <ol> <li> 1.1 Сфера применения <ol> <li> 1.1.1 Вне области действия </li> </ol> </li> <li> 1.2 Определения значений </li> </ol> </li> <li> 2 Цвета полосы прокрутки: свойство scrollbar-color </li> <li> 3 Толщина полосы прокрутки: свойство ширины полосы прокрутки </li> <li> Приложение А.Благодарности </li> <li> Приложение Б. Изменения </li> <li> Приложение C. Рекомендации по безопасности и конфиденциальности </li> <li> Соответствие <ol> <li> Условные обозначения в документе </li> <li> Классы соответствия </li> <li> Частичные реализации <ol> <li> Реализации нестабильных и проприетарных функций </li> </ol> </li> <li> Неэкспериментальные реализации </li> </ol> </li> <li> Индекс <ol> <li> Термины, определенные в данной спецификации </li> <li> Термины определены ссылкой </li> </ol> </li> <li> Рекомендации <ol> <li> Нормативные ссылки </li> <li> Информационные ссылки </li> </ol> </li> <li> Индекс собственности </li> </ol> <h3 data-level="1"><span class="ez-toc-section" id="1"> 1.Введение </span></h3> <p role="note"> Примечание: эта спецификация поддерживается в репозитории W3C csswg-drafts GitHub как css-scrollbars-1. </p> <h4 data-level="1.1"><span class="ez-toc-section" id="11"> 1.1. Область применения </span></h4> <em> Этот подраздел не является нормативным. </em> <p> Модуль CSS Scrollbars специально предназначен для стилизации самих элементов управления полосой прокрутки, например их цвет и ширина на уровне 1, а не их макет и не прокручивается ли какой-либо контент. Все воздействия на макет и возможность прокрутки контента указываются в модуле переполнения CSS.</p> <p> На основе задокументированных сценариев использования, Этот модуль намеревается разрешить три основных варианта использования полос прокрутки: </p> <ol> <li> Раскрашивание полос прокрутки для лучшего соответствия пользовательскому интерфейсу веб-приложения. </li> <li> Использование более тонкой полосы прокрутки при небольшой области прокрутки. </li> <li> Создание настраиваемых полос прокрутки без ущерба для прокрутки. </li> </ol> <p> Для решения этих задач этот модуль добавляет свойства для управления цветами и ширина полос прокрутки (если есть) элемента.</p> <h5 data-level="1.1.1"><span class="ez-toc-section" id="111"> 1.1.1. Вне сферы действия </span></h5> Расположение полос прокрутки и связанного или смежного содержимого, а также возможность прокрутки содержимого выходит за рамки. Эти функции указаны в модуле переполнения CSS. <p> Псевдоэлементы для выбора определенных частей полосы прокрутки выходят за рамки. Реализация псевдоэлементов для полосы прокрутки в WebKit: считается функцией, ошибочно представленной в Интернете. Основные опасения по поводу подхода псевдоэлементов: </p> <ul> <li> Операционные системы постоянно развивают дизайн полос прокрутки, чтобы обеспечить лучшее взаимодействие с пользователем, за пределами способности любого набора псевдоэлементов точно смоделировать это с течением времени.</li> <li> На разных платформах разная структура полосы прокрутки означает, что тестирование взаимодействия сложнее, потому что авторам нужно будет учитывать не только движок, но и платформы. </li> </ul> <h4 data-level="1.2"><span class="ez-toc-section" id="12"> 1.2. Определения значений </span></h4> <p> Эта спецификация следует соглашениям об определении свойств CSS из [CSS2] с использованием синтаксиса определения значений из [CSS-VALUES-3]. Типы значений, не определенные в этой спецификации, определены в CSS Values ​​& Units [CSS-VALUES-3]. Комбинация с другими модулями CSS может расширить определения этих типов значений.</p> <p> В дополнение к значениям, зависящим от свойств, перечисленным в их определениях, все свойства, определенные в этой спецификации также принимают ключевые слова CSS в качестве значения свойства. Для удобочитаемости они явно не повторяются. </p> <b title="This feature is in less than two current engines."> ⚠ </b> MDN <p> цвет полосы прокрутки </p> <p> Только в одном текущем двигателе. </p> <p> Firefox64 + SafariNoneChromeNone <hr/> OperaNoneEdgeNone <hr/> Edge (устаревшая) Нет <hr/> Firefox для Android64 + iOS SafariНетChrome для AndroidНетAndroid WebViewНетSamsung InternetНетOpera MobileНет </p> <p> Это свойство позволяет автору устанавливать цвета полос прокрутки элемента.</p> <p> UA должны применить значение цвета полосы прокрутки, установленное для корневого элемента, к области просмотра. </p> <p role="note"> Примечание. В отличие от свойств переполнения (и переполнения- *), значение scrollbar-color, установленное в элементе тела HTML, не распространяется на область просмотра. </p> <dl> <dt> <dfn data-dfn-for="scrollbar-color" data-dfn-type="value" data-export=""> авто </dfn> </dt> <dd> отрисовка платформы по умолчанию для полосы прокрутки. </dd> <dt> <dfn data-dfn-for="scrollbar-color" data-dfn-type="value" data-export=""> темный </dfn> </dt> <dd> показать темную полосу прокрутки, который может быть темным вариантом полосы прокрутки, предоставляемой платформой, или настраиваемая полоса прокрутки с темными цветами.</dd> <dt> <dfn data-dfn-for="scrollbar-color" data-dfn-type="value" data-export=""> свет </dfn> </dt> <dd> показать светлую полосу прокрутки, который может быть либо облегченным вариантом полосы прокрутки, предоставляемой платформой, или настраиваемая полоса прокрутки со светлыми цветами. </dd> <dt> <dfn data-dfn-for="scrollbar-color" data-dfn-type="value" data-export=""> <цвет> </dfn> </dt> <dd> применить первый цвет к ползунку полосы прокрутки, а второй цвет — для дорожки полосы прокрутки. </dd> </dl> <p> Детали: </p> <p> Track относится к фону полосы прокрутки, который обычно фиксируется независимо от положения прокрутки.</p> <p> Большой палец означает подвижную часть полосы прокрутки, который обычно плавает поверх трассы. </p> <p> Если это свойство вычисляется для значения, отличного от auto, реализации могут отображать более простую полосу прокрутки, чем отрисовка пользовательского интерфейса платформы по умолчанию, и раскрасьте его соответствующим образом. </p> <p> (Примечание: добавьте диаграмму, показывающую различные именованные части — что-то вроде http://www.howtocreate.co.uk/tutorials/scrlbar.html) </p> <p> (Примечание: добавьте пример элемента переполнения с раскрашенными полосами прокрутки для соответствия стилю страницы, PNG того же самого в браузере, который поддерживает его в настоящее время) </p> <p> Реализации могут игнорировать любой из цветов. если соответствующая часть не существует на базовой платформе.</p> <p> При использовании свойства scrollbar-color с определенными значениями цвета, Авторы должны убедиться, что указанные цвета имеют достаточный контраст между ними. Для значений ключевых слов UA должны обеспечить достаточный контраст используемых цветов. UA должны гарантировать, что их фактические значения цвета для светлого и темного должны обеспечивать достаточный контраст с фоном элемента. (т.е. светлые на светлом фоне и темные на темном фоне всегда должен иметь достаточный контраст) См. WCAG 2.1 SC 1.4.11 Нетекстовый контраст [WCAG21].UA могут игнорировать эти требования к контрасту на основе явных предпочтений пользователя. (например, когда пользователи выбирают параметр / настройку конфигурации, всегда обеспечивает определенный цвет полосы прокрутки / использование полос прокрутки по умолчанию в системе). </p> <p role="note"> Примечание: когда пользователь взаимодействует с полосой прокрутки (например, наводит курсор или активирует), реализации могут изменять, какие цвета полосы прокрутки применяются к каким частям полосы прокрутки. </p> <p role="note"> Примечание. IE использует именованные системные цвета по умолчанию для каждого свойства цвета полосы прокрутки.См. Соответствующий выпуск 1956. </p> <b title="This feature is in less than two current engines."> ⚠ </b> MDN <p> ширина полосы прокрутки </p> <p> Только в одном текущем двигателе. </p> <p> Firefox64 + SafariNoneChromeNone <hr/> OperaNoneEdgeNone <hr/> Edge (устаревшая) Нет <hr/> Firefox для Android64 + iOS SafariНетChrome для AndroidНетAndroid WebViewНетSamsung InternetНетOpera MobileНет </p> <p> Это свойство позволяет автору устанавливать максимальную толщину полос прокрутки элемента при их отображении.</p> <dl> <dt> <dfn data-dfn-for="scrollbar-width" data-dfn-type="value" data-export=""> авто </dfn> Реализации </dt> <dd> должны использовать ширину полосы прокрутки платформы по умолчанию. </dd> <dt> <dfn data-dfn-for="scrollbar-width" data-dfn-type="value" data-export=""> тонкий </dfn> </dt> <dd> Реализации должны использовать более тонкие полосы прокрутки, чем автоматические, когда это применимо. Это может означать тонкий вариант полосы прокрутки, предоставляемой платформой, или настраиваемая полоса прокрутки тоньше, чем полоса прокрутки платформы по умолчанию. <p role="note"> Примечание. На некоторых платформах по умолчанию может быть только крошечная полоса прокрутки. которые нельзя или нет смысла делать тоньше.В этом случае реализации могут рассматривать это значение как автоматическое. </p> </dd> <dt> <dfn data-dfn-for="scrollbar-width" data-dfn-type="value" data-export=""> нет </dfn> Реализации </dt> <dd> не должны отображать полосу прокрутки, однако на прокручиваемость элемента это не влияет. </dd> </dl> <p> UA должны применить значение ширины полосы прокрутки, установленное для корневого элемента, к области просмотра. </p> <p> UA должны обеспечивать минимальный фактический размер полосы прокрутки согласно WCAG 2.1 SC 2.5.5 Target Size [WCAG21]. </p> <p> Авторы, которые не используют ничего, должны предоставить альтернативную / эквивалентную визуальную подсказку, которая возможна прокрутка и больше контента.Для ситуаций, когда элемент будет прокручиваться другими способами вместо непосредственных действий пользователя (например, программно) авторы должны использовать overflow: hidden вместо none. </p> <p role="note"> Примечание. В отличие от свойств переполнения (и переполнения- *), значение ширины полосы прокрутки, установленное в элементе тела HTML, не распространяется на область просмотра. </p> <p role="note"> Примечание. Эта спецификация не определяет точное положение или форму полосы прокрутки, или любой его анимации, например, затухание или скольжение в / из поля зрения.</p> <h3><span class="ez-toc-section" id="_A"> Приложение A. Благодарности </span></h3> <p> Это приложение <em> информационное </em>. </p> <p> Благодаря сценариям использования, прототипированию, реализации и отзывам Таба Аткинса и Ксидорна Куана. Благодаря обзору доступности и вкладу (# 3315) от Патрика Х. Лаука. </p> <h3><span class="ez-toc-section" id="i-39"> Приложение Б. Изменения </span></h3> <p> Это приложение <em> информационное </em>. </p> <p> В этом приложении описаны изменения из Первого общедоступного рабочего проекта (FPWD) от 25 сентября 2018 г.</p> <ul> <li> № 3237: вычисленное значение scrollbar-color изменено на: указанное ключевое слово или два вычисленных цвета </li> <li> # 4693: Уточнена область действия: стилизация самих элементов управления полосой прокрутки, без макета или прокрутки. </li> <li> # 3315: Дополнительные и обновленные рекомендации по доступности для цвета полосы прокрутки и ширины полосы прокрутки. </li> </ul> <h3><span class="ez-toc-section" id="_C"> Приложение C. Вопросы безопасности и конфиденциальности </span></h3> <p> Это приложение <em> информационное </em>. </p> <p> Согласно анкете для самопроверки: Безопасность и конфиденциальность: вопросы для рассмотрения </p> <ol> <li> Имеется ли в данной спецификации информация, позволяющая установить личность? <p> №</p> </li> <li> Имеет ли эта спецификация дело с ценными данными? <p> № </p> </li> <li> Вводит ли эта спецификация новое состояние для источника, которое сохраняется во время сеансов просмотра? <p> № </p> </li> <li> Предоставляет ли эта спецификация постоянное состояние перекрестного происхождения для Интернета? <p> № </p> </li> <li> Предоставляет ли эта спецификация какие-либо другие данные источнику, к которому у него в настоящее время нет доступа? <p> №</p> </li> <li> Включает ли эта спецификация новые механизмы выполнения / загрузки скриптов? <p> № </p> </li> <li> Позволяет ли эта спецификация источнику доступа к местоположению пользователя? <p> № </p> </li> <li> Разрешает ли эта спецификация доступ источника к датчикам на устройстве пользователя? <p> № </p> </li> <li> Позволяет ли эта спецификация источнику доступа к аспектам локальной вычислительной среды пользователя? <p> №</p> </li> <li> Разрешает ли эта спецификация доступ источника к другим устройствам? <p> № </p> </li> <li> Позволяет ли эта спецификация источнику некоторой степени контролировать собственный интерфейс пользовательского агента? <p> Да. Свойства scrollbar- * позволяют странице изменять цвет и ширину полосы прокрутки. собственного пользовательского интерфейса пользовательского агента, например полосы прокрутки в окне страницы, на содержании во фреймах, встроенном в страницу, или на переполненных элементах с полосами прокрутки на странице.</p> </li> <li> Предоставляет ли эта спецификация временные идентификаторы в Интернете? <p> № </p> </li> <li> Различается ли эта спецификация между поведением в собственном и стороннем контекстах? <p> № </p> </li> <li> Как эта спецификация должна работать в контексте режима «инкогнито» пользовательского агента? <p> Нет иначе. </p> </li> <li> Сохраняет ли эта спецификация данные на локальном устройстве пользователя? <p> №</p> </li> <li> Есть ли в этой спецификации разделы «Вопросы безопасности» и «Вопросы конфиденциальности»? <p> Да. </p> </li> <li> Допускает ли данная спецификация понижение характеристик безопасности по умолчанию? <p> № </p> </li> </ol> <h3><span class="ez-toc-section" id="i-40"> Соответствие </span></h3> <h4><span class="ez-toc-section" id="i-41"> Условные обозначения в документе </span></h4> <p> Требования к соответствию выражаются комбинацией описательные утверждения и терминология RFC 2119. Ключевые слова «ДОЛЖНЫ», «НЕ ДОЛЖЕН», «ОБЯЗАТЕЛЬНО», «ДОЛЖЕН», «НЕ ДОЛЖЕН», «ДОЛЖЕН», «НЕ ДОЛЖЕН», «РЕКОМЕНДУЕТСЯ», «МОЖЕТ» и «ДОПОЛНИТЕЛЬНО» в нормативных частях настоящего документ следует интерпретировать, как описано в RFC 2119.Однако для удобства чтения эти слова не отображаются в верхнем регистре. буквы в этой спецификации. </p> <p> Весь текст данной спецификации является нормативным, кроме разделов. явно помечены как ненормативные, примеры и примечания. [RFC2119] </p> <p> Примеры в этой спецификации представлены словами «например» или выделяются отдельно от нормативного текста с помощью <code> class = "example" </code>, как это: </p> <p> Это информативный пример.</p> <p> Информационные примечания начинаются со слова «Примечание» и выделяются нормативный текст с <code> class = "note" </code>, например: </p> <p role="note"> Примечание, это информативное примечание. </p> <p> Рекомендации — это нормативные разделы, призванные привлечь особое внимание. отделяется от другого нормативного текста с помощью <code> <strong> </code>, например это: <strong> UA ДОЛЖНЫ предоставлять доступную альтернативу. </strong> </p> <h4><span class="ez-toc-section" id="i-42"> Класс соответствия </span></h4> <p> Соответствие данной спецификации определяется для трех классов соответствия: </p> <dl> <dt> таблица стилей </dt> <dd> А CSS таблица стилей.</dd> <dt> рендерер </dt> <dd> UA, который интерпретирует семантику таблицы стилей и отображает документы, которые их используют. </dd> <dt> инструмент для разработки </dt> <dd> UA, который пишет таблицу стилей. </dd> </dl> <p> Таблица стилей соответствует этой спецификации если все его утверждения, которые используют синтаксис, определенный в этом модуле, действительны в соответствии с общей грамматикой CSS и отдельными грамматиками каждого функция, определенная в этом модуле. </p> <p> Средство визуализации соответствует этой спецификации если в дополнение к интерпретации таблицы стилей, как определено соответствующие спецификации, он поддерживает все определенные функции по этой спецификации, правильно проанализировав их и соответствующим образом отрисовываем документ.Однако неспособность UA для корректной визуализации документа из-за ограничений устройства не делает UA несоответствующим. (Например, UA не требуется для отображения цвета на монохромном мониторе.) </p> <p> Инструмент разработки соответствует этой спецификации если он пишет синтаксически правильные таблицы стилей в соответствии с общая грамматика CSS и отдельные грамматики каждой функции в этот модуль, и соответствовать всем остальным требованиям соответствия таблиц стилей как описано в этом модуле.</p> <h4><span class="ez-toc-section" id="i-43"> Частичные реализации </span></h4> <p> Чтобы авторы могли использовать правила синтаксического анализа с прямой совместимостью, чтобы назначать резервные значения, средства визуализации CSS <strong> должны обрабатывать </strong> как недопустимые (и игнорировать при необходимости) любые правила, свойства, значения свойств, ключевые слова, и другие синтаксические конструкции, для которых у них нет пригодного уровня поддерживать. В частности, пользовательские агенты <strong> не должны выборочно </strong> игнорировать неподдерживаемые значения компонентов и соблюдать поддерживаемые значения в одном объявление многозначного свойства: если какое-либо значение считается недопустимым (поскольку должны быть неподдерживаемые значения), CSS требует, чтобы все объявление игнорировать.</p> <h5><span class="ez-toc-section" id="i-44"> Реализации нестабильных и проприетарных функций </span></h5> <p> Чтобы избежать конфликтов с будущими стабильными функциями CSS, CSSWG рекомендует следовать передовым методам реализации нестабильных функций и проприетарных расширений CSS. </p> <h4><span class="ez-toc-section" id="i-45"> Неэкспериментальные реализации </span></h4> <p> Когда спецификация достигает стадии рекомендации кандидата, возможны неэкспериментальные реализации, и разработчики должны выпустить реализацию без префикса любой функции уровня CR, которую они может продемонстрировать правильную реализацию в соответствии со спецификацией.</p> <p> Для установления и поддержания взаимодействия CSS через реализациях, рабочая группа CSS просит, чтобы не экспериментальные Средства визуализации CSS отправляют отчет о реализации (и, при необходимости, тестовые примеры, использованные для этого отчета о реализации) в W3C перед выпуск без префикса реализации каких-либо функций CSS. Тестовые наборы отправленные в W3C могут быть проверены и исправлены CSS. Рабочая группа. </p> <p> Дополнительная информация об отправке тестовых примеров и отчетов о реализации можно найти на веб-сайте Рабочей группы CSS http: // www.w3.org/Style/CSS/Test/. Вопросы следует направлять в список рассылки public-css-testsuite@w3.org. </p> <h3><span class="ez-toc-section" id="i-46"> Индекс </span></h3> <h4><span class="ez-toc-section" id="i-47"> Термины, определенные в данной спецификации </span></h4> https://drafts.csswg.org/css-color-3/#valuea-def-color <b> Ссылка в: </b> https://drafts.csswg.org/css-overflow-3/#propdef-overflow <b> Ссылка в: </b> https://drafts.csswg.org/css-values-4/#css-wide-keywords <b> Ссылка в: </b> https://drafts.csswg.org/css-values-4/#mult-num <b> Ссылка в: </b> https: // черновики.csswg.org/css-values-4/#comb-one <b> Ссылка в: </b> <h4><span class="ez-toc-section" id="i-48"> Термины, определенные ссылкой </span></h4> <h3><span class="ez-toc-section" id="i-49"> Список литературы </span></h3> <h4><span class="ez-toc-section" id="i-50"> Нормативные ссылки </span></h4> <dl> <dt> [CSS-COLOR-3] </dt> <dd> Тантек Челик; Крис Лилли; Дэвид Барон. CSS Color Module Level 3. 19 июня 2018 г. REC. URL: https://www.w3.org/TR/css-color-3/ </dd> <dt> [CSS-OVERFLOW-3] </dt> <dd> Дэвид Барон; Элика Этемад; Флориан Ривоаль. CSS Overflow Module, уровень 3. 3 июня 2020 г. WD. URL: https: //www.w3.org / TR / css-overflow-3 / </dd> <dt> [CSS-VALUES-3] </dt> <dd> Tab Atkins Jr .; Элика Этемад. Модуль «Значения и единицы измерения CSS», уровень 3. 6 июня 2019 г. CR. URL: https://www.w3.org/TR/css-values-3/ </dd> <dt> [CSS-VALUES-4] </dt> <dd> Tab Atkins Jr .; Элика Этемад. Модуль «Значения и единицы измерения CSS», уровень 4. 11 ноября 2020 г. WD. URL: https://www.w3.org/TR/css-values-4/ </dd> <dt> [CSS2] </dt> <dd> Берт Бос; и другие. Спецификация каскадных таблиц стилей, уровень 2, редакция 1 (CSS 2.1). 7 июня 2011 г.REC. URL: https://www.w3.org/TR/CSS21/ </dd> <dt> [RFC2119] </dt> <dd> С. Браднер. Ключевые слова для использования в RFC для обозначения уровней требований. Март 1997 г. Наилучшая текущая практика. URL: https://tools.ietf.org/html/rfc2119 </dd> </dl> <h4><span class="ez-toc-section" id="i-51"> Справочные документы </span></h4> <dl> <dt> [WCAG21] </dt> <dd> Эндрю Киркпатрик; и другие. Рекомендации по обеспечению доступности веб-контента (WCAG) 2.1. 5 июня 2018. REC. URL: https://www.w3.org/TR/WCAG21/ </dd> </dl> <h3><span class="ez-toc-section" id="i-52"> Индекс собственности </span></h3> <table> <thead> <tr> <th scope="col"> Имя </th> <th scope="col"> Стоимость </th> <th scope="col"> Начальный </th> <th scope="col"> Применимо к </th> <th scope="col"> дюйм.</th> <th scope="col">% возрастов </th> <th scope="col"> Тип анимации </th> <th scope="col"> Канонический порядок </th> <th scope="col"> Расчетное значение </th> </tr> </thead> <tbody> <tr> <th scope="row"> цвет полосы прокрутки </th> <td> авто | темный | свет | <цвет> {2} </td> <td> авто </td> <td> коробки, к которым применяется перелив </td> <td> да </td> <td> н / д </td> <td> по вычисленному значению </td> <td> за грамматику </td> <td> указанное ключевое слово или два вычисленных цвета </td> </tr> <tr> <th scope="row"> ширина полосы прокрутки </th> <td> авто | тонкий | никто </td> <td> авто </td> <td> коробки, к которым применяется перелив </td> <td> нет </td> <td> н / д </td> <td> по вычисленному значению </td> <td> за грамматику </td> <td> указанное ключевое слово или абсолютная длина </td> </tr> </tbody> </table> <b> # propdef-scrollbar-color </b> <b> Ссылка в: </b> <b> # valdef-scrollbar-color-auto </b> <b> Ссылка в: </b> <b> # valdef-scrollbar-color-dark </b> <b> Ссылка в: </b> <b> # valdef-scrollbar-color-light </b> <b> Ссылка в: </b> <b> # propdef-scrollbar-width </b> <b> Ссылка в: </b> <b> # valdef-scrollbar-width-auto </b> <b> Ссылка в: </b> <b> # valdef-scrollbar-width-none </b> <b> Ссылка в: </b> <h2><span class="ez-toc-section" id="_WebKit"> полос прокрутки стиля | WebKit </span></h2> <p> WebKit теперь поддерживает стили для полос прокрутки в разделах переполнения, списках, раскрывающихся меню и текстовых областях.Для тех, кто хочет пропустить статью и сразу перейти к первоисточнику, вот пример. </p> <p> Вот скриншот для тех, кто не использует достаточно свежую версию WebKit: </p> <br/> <p> Псевдоэлемент полосы прокрутки указывает, что объект должен использовать настраиваемую полосу прокрутки. Когда присутствует этот псевдоэлемент, WebKit отключит встроенную отрисовку полосы прокрутки и просто будет использовать информацию, предоставленную в CSS. </p><pre> <code> :: - webkit-scrollbar { ширина: 13 пикселей; высота: 13 пикселей; } </code> </pre><p> Свойства ширины и высоты элемента полосы прокрутки указывают ширину вертикальной полосы прокрутки и высоту горизонтальной полосы прокрутки.Для этих значений также можно указать проценты, и в этом случае полоса прокрутки будет занимать этот процент от области просмотра. </p> <p> Полоса прокрутки состоит из кнопок полосы прокрутки и дорожки. Сама дорожка подразделяется на части и большой палец. Части дорожки представляют собой области выше и ниже большого пальца. </p> <p> Кроме того, теперь можно стилизовать угол полосы прокрутки, а также изменить размер текстовых полей с изменяемым размером. </p> <p> Вот полный список всех новых псевдоэлементов.Все эти псевдоэлементы должны иметь префикс <code> -webkit- </code>. </p><pre> <code> полоса прокрутки кнопка полосы прокрутки полоса прокрутки полоса прокрутки полоса прокрутки полоса прокрутки угол изменить размер </code> </pre><p> Каждый из этих объектов может быть стилизован с границами, тенями, фоновыми изображениями и т. Д. Для создания полностью настраиваемых полос прокрутки, которые по-прежнему будут учитывать настройки операционной системы в том, что касается размещения кнопок и поведения при нажатии. </p> <p> Следующие псевдоклассы были введены и могут применяться к псевдоэлементам.</p> <p> <code>: horizontal </code> — горизонтальный псевдокласс применяется к любым частям полосы прокрутки, которые имеют горизонтальную ориентацию. </p> <p> <code>: vertical </code> — Вертикальный псевдокласс применяется к любым частям полосы прокрутки, которые имеют вертикальную ориентацию. </p> <p> <code>: декремент </code> — Псевдокласс декремента применяется к кнопкам и фрагментам дорожки. Он указывает, будет ли кнопка или фрагмент дорожки уменьшать позицию представления при использовании (например, вверх на вертикальной полосе прокрутки, влево на горизонтальной полосе прокрутки).</p> <p> <code>: increment </code> — Псевдокласс инкремента применяется к кнопкам и элементам дорожки. Он указывает, будет ли кнопка или фрагмент дорожки увеличивать позицию представления при использовании (например, вниз на вертикальной полосе прокрутки, прямо на горизонтальной полосе прокрутки). </p> <p> <code>: start </code> — Псевдокласс start применяется к кнопкам и элементам дорожки. Он указывает, находится ли объект перед большим пальцем. </p> <p> <code>: end </code> — конечный псевдокласс применяется к кнопкам и элементам дорожки.Он указывает, находится ли объект после большого пальца. </p> <p> <code>: двойная кнопка </code> — Псевдокласс двойной кнопки применяется к кнопкам и фрагментам дорожки. Он используется для определения того, является ли кнопка частью пары кнопок, которые вместе находятся на одном конце полосы прокрутки. Для элементов дорожки это указывает, упирается ли элемент дорожки в пару кнопок. </p> <p> <code>: single-button </code> — Псевдокласс single-button применяется к кнопкам и фрагментам дорожки. Он используется для определения того, находится ли кнопка сама по себе в конце полосы прокрутки.Для частей дорожки это указывает, упирается ли часть дорожки в одноэлементную кнопку. </p> <p> <code>: no-button </code> — Применяется к фрагментам дорожки и указывает, доходит ли фрагмент дорожки до края полосы прокрутки, т.е. на этом конце дорожки нет кнопки. </p> <p> <code>: угол присутствует </code> — Применяется ко всем частям полосы прокрутки и указывает, присутствует ли угол полосы прокрутки. </p> <p> <code>: window-inactive </code> — Применяется ко всем частям полосы прокрутки и указывает, активно ли в данный момент окно, содержащее полосу прокрутки.(В последних ночных сборниках этот псевдокласс теперь применяется и к :: selection. Мы планируем расширить его для работы с любым контентом и предложить его в качестве нового стандартного псевдокласса.) </p> <p> Кроме того, псевдоклассы: enabled,: disabled,: hover и: active также работают с частями полосы прокрутки. </p> <p> Для свойства display можно установить значение none, чтобы скрыть определенные части. </p> <p> Поля поддерживаются вдоль оси полосы прокрутки. Они могут быть отрицательными (чтобы, например, можно было надуть дорожку, чтобы частично закрыть кнопки).</p> <p> В приведенном выше связанном примере представлена ​​очень сложная полоса прокрутки, которая имеет все поведения полосы прокрутки OS X (двойные кнопки, неактивный вид, отслеживание перекрытия кнопок и т. Д.), А также многие из поведения полосы прокрутки Windows Vista (эффекты наведения, уникальные нажатие смотрит вверх и вниз по дорожке и тд). </p> .<div class='yarpp-related yarpp-related-none'> <p>No related posts.</p> </div> </div> </div> <div class="post-sharrre group"> <div id="twitter" data-url="https://ylianova.ru/css/stilizacziya-scrollbar-css-kak-stilizovat-cherez-css-polosu-prokrutki-vnutri-bloka-habr-qa.html" data-text="Стилизация scrollbar css: Как стилизовать через css полосу прокрутки внутри блока? — Хабр Q&A" data-title="Tweet"></div> <div id="facebook" data-url="https://ylianova.ru/css/stilizacziya-scrollbar-css-kak-stilizovat-cherez-css-polosu-prokrutki-vnutri-bloka-habr-qa.html" data-text="Стилизация scrollbar css: Как стилизовать через css полосу прокрутки внутри блока? — Хабр Q&A" data-title="Like"></div> <div id="googleplus" data-url="https://ylianova.ru/css/stilizacziya-scrollbar-css-kak-stilizovat-cherez-css-polosu-prokrutki-vnutri-bloka-habr-qa.html" data-text="Стилизация scrollbar css: Как стилизовать через css полосу прокрутки внутри блока? — Хабр Q&A" data-title="+1"></div> <div id="pinterest" data-url="https://ylianova.ru/css/stilizacziya-scrollbar-css-kak-stilizovat-cherez-css-polosu-prokrutki-vnutri-bloka-habr-qa.html" data-text="Стилизация scrollbar css: Как стилизовать через css полосу прокрутки внутри блока? — Хабр Q&A" data-title="Pin It"></div> </div> </div> </article> <ul class="post-nav group"> <li class="next"><a href="https://ylianova.ru/css/semibold-css-how-do-i-set-semi-bold-font-via-css-font-weight-of-600-doesnt-make-it-look-like-the-semi-bold-i-see-in-my-photoshop-file.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Вперед</strong> <span>Semibold css: How do I set ‘semi-bold’ font via CSS? Font-weight of 600 doesn’t make it look like the semi-bold I see in my Photoshop file</span></a></li> <li class="previous"><a href="https://ylianova.ru/raznoe-2/naver-registracziya.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong> <span>Naver регистрация: 페이지를 찾을 수 없습니다. :: 네이버</span></a></li> </ul> <section id="comments" class="themeform"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/css/stilizacziya-scrollbar-css-kak-stilizovat-cherez-css-polosu-prokrutki-vnutri-bloka-habr-qa.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://ylianova.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required">

Имя *

Email *

Сайт