Стилизация scrollbar css: Scrollbar в современном CSS / Хабр

html — Стилизация scrollbar на сайте

Как выглядит наиболее эффективный вариант стилизации скроллбара на сайте? Именно стилизации, а не имитации посредством js. Он должен сохранить все свойства (прокрутка колёсиком, при зажатом колёске, стрелками «вверх-вниз», кнопками home, end и т.д.)

Такое можно наблюдать в различных сервисах google (новое оформление).

• html
• javascript
• css

Google использует возможности браузерного движка webkit, а именно свойство webkit scrollbar

И работает оно конечно только в хроме и сафари. А на js есть отличный плагин (правда на jquery) — jScrollPane , который понимает и стрелочки и колесико прокрутки и up/down (только не понимает зажатое колесико, но думаю для большинства людей это не критично).

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

1

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

Краткое содержание:

scrollbar-base-color:#Цвет; /* Задает основной цвет для скролла */
/* И более тонкие настройки: */
scrollbar-3dlight-color:#Цвет; /*задает цвет верхней и левой границ полосы прокрутки, ее бегунка и стрелок*/
scrollbar-arrow-color:#Цвет; /*задает цвет стрелок на кнопках полосы прокрутки*/
scrollbar-darkshadow-color:#Цвет; /*задает цвет "тени", отбрасываемой бегунком и кнопками полосы прокрутки (цвет правых и нижних границей)*/
scrollbar-face-color:#Цвет; /*задает основной цвет бегунка и кнопок прокрутки полосы прокрутки*/
scrollbar-highlight-color:#Цвет; /*задает цвет "освещенной" части бегунка и кнопок прокрутки полосы прокрутки (цвет левых и верхних их граней)*/
scrollbar-shadow-color:#Цвет; /*задает цвет "неосвещенной" части бегунка и кнопок прокрутки полосы прокрутки (цвет правых и нижних их граней). Не путать с цветом "тени", задаваемым атрибутом scroll-darkshadow-color*/
crollbar-track-color:#Цвет; /*задает цвет фона полосы прокрутки, той ее части, по которой перемещается бегунок*/

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

scroll-padding — CSS — Дока

1. Кратко
2. Пример
3. Как пишется
4. Как понять

Кратко

Скопировано

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

Пример

Скопировано

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

html {  scroll-padding-top: 100px;}
          html {
  scroll-padding-top: 100px;
}

Открыть демо в новой вкладке

Как пишется

Скопировано

scroll-padding задаёт отступы таким же образом как и padding и имеет такой же набор CSS-свойств для каждой из сторон:

Физические:

• scroll-padding-top;
• scroll-padding-right;
• scroll-padding-bottom;
• scroll-padding-left.

Логические:

• scroll-padding-block-start;
• scroll-padding-inline-start;
• scroll-padding-block-end;
• scroll-padding-inline-end.

💡

Горизонтальные отступы не влияют на вертикальную прокрутку, и наоборот.

Как понять

Скопировано

Представьте блок с полосой прокрутки. У такого блока видна только часть содержимого, определяемая его шириной и высотой за вычетом полос прокрутки. Эта видимая область называется скроллпорт (scrollport), по аналогии с вьюпорт (viewport) — видимой областью всего экрана.

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

Тут можно столкнуться с визуальными проблемами:

• Целевые элементы прилипают к верху экрана, им не хватает отступа.
• Фиксированные к верху экрана элементы перекрывают целевой элемент.

scroll-padding решает эти проблемы, никак не изменяя макет страницы. Его значения сокращают скроллпорт, создавая оптимальную для показа контента область. В ней браузер старается размещать целевые блоки. Высота этой области будет использоваться при выполнении операций постраничной прокрутки (например, при нажатии PgDown).

💡

Свойство не изменяет макет страницы. Если вы добавите селектору html CSS-правило scroll-padding-top: 100px, то отступ в 100 пикселей сверху не появится. Свойство влияет только на расчёты положения прокрутки.

Оценка материала

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

Предыдущий материал

←

scroll-behavior

ctrl + alt + ←

Следующий материал

→

scrollbar-color

ctrl + alt + →

Стиль полос прокрутки CSS — CSS: Каскадные таблицы стилей

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

track , который является фоном полосы прокрутки, и цвет полосы прокрутки thumb , который является перетаскиваемым маркером полосы прокрутки.

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

 .поэма {
  ширина: 300 пикселей;
  высота: 100 пикселей;
  граница: сплошная 1px;
}
 

 .поэма {
  переполнение: прокрутка;
  цвет полосы прокрутки: красно-оранжевый;
  ширина полосы прокрутки: тонкая;
}
 

 <цитата>
   
Небольшой важный факт
 
  <пред>
Это Эрик Гарнер работал
некоторое время для парков и рек.
Департамент садоводства, а значит,
быть может, что своими очень большими руками,
возможно, по всей вероятности,
он положил осторожно в землю
некоторые растения, которые, скорее всего,
некоторые из них, по всей вероятности,
продолжать расти, продолжать
делать то, что делают такие растения, как дом
и кормить маленьких и нужных существ,
как приятный на ощупь и запах,
как преобразование солнечного света
в пищу, как облегчить
чтобы мы дышали.
 
  

    -  org/poetry/a-small-needful-fact/">Росс Гей
  

 

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

Свойства CSS

• ширина полосы прокрутки
• цвет полосы прокрутки

• блок переполнения свойство CSS
• встроенное переполнение Свойство CSS
• переполнение-x Свойство CSS
• переполнение-y Свойство CSS
• переполнение Свойство сокращенного CSS
• overflow-clip-margin Свойство CSS
• поведение прокрутки свойство CSS
• полоса прокрутки-желоб свойство CSS
• scroll-margin Сокращенное свойство CSS
• scroll-padding Сокращенное свойство CSS
• прокрутка-щелчок-выравнивание Свойство CSS
• scroll-snap-stop Свойство CSS
• тип привязки прокрутки Свойство CSS
• ::-webkit-scrollbar псевдоэлемент
• глоссарий спирального контейнера термин
• полоса прокрутки роль ARIA

Спецификация
Модуль стилей полос прокрутки CSS Уровень 1

• 9 0026 прокрутка временной шкалы , ось прокрутки временной шкалы , имя прокрутки временной шкалы
• Модуль переполнения CSS
• Модуль привязки прокрутки CSS

Обнаружили проблему с содержанием этой страницы?

• Отредактируйте страницу на GitHub.
• Сообщить о проблеме с содержимым.
• Посмотреть исходный код на GitHub.

Хотите принять более активное участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена 29 мая 2023 г. участниками MDN.

Привязка прокрутки CSS — CSS: Каскадные таблицы стилей

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

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

Чтобы просмотреть привязку прокрутки в поле ниже, прокрутите вверх-вниз и влево-вправо сетку из 45 пронумерованных полей в прокручиваемом окне просмотра.

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

Используя свойства привязки, вы можете разрешить или заблокировать прокрутку элемента, в данном случае пронумерованного поля. Установите флажок «Запретить прокрутку мимо полей», чтобы все действия по прокрутке ограничивались прокруткой до соседнего поля.

Чтобы сравнить привязку прокрутки к обычной прокрутке, установите флажок «отключить привязку» и повторите попытку прокрутки.

Чтобы увидеть код для этого примера, просмотрите исходный код на GitHub.

Свойства на контейнерах

• прокрутка-защелка
• заполнение прокрутки
  • верхняя часть прокрутки
  • прокрутка-заполнение вправо
  • нижняя прокрутка
  • прокрутка-заполнение влево
  • Scroll-Padding-Inline
  • прокрутка-заполнение-встроенный-старт
  • прокрутка-заполнение-встроенный-конец
  • блок прокрутки
  • прокрутка-заполнение-блок-старт
  • конец блока прокрутки

Свойства дочерних элементов

• scroll-snap-align
• полоса прокрутки
  • полоса прокрутки вверху
  • полоса прокрутки вправо
  • полоса прокрутки снизу
  • полоса прокрутки слева
  • полоса прокрутки встроенная
  • прокрутка-маржа-встроенный-старт
  • полоса прокрутки встроенный конец
  • полоса прокрутки
  • прокрутка-маржа-блок-старт
  • конец блока прокрутки
• прокрутка-защелка

Основные принципы привязки прокрутки CSS

Обзор и примеры функций привязки прокрутки CSS.

• :целевой псевдокласс
• переполнение свойство CSS
• Элемент scroll() метод
• Элемент scrollBy() метод
• Элемент scrollIntoView() метод
• Элемент scrollTo() метод
• Документ прокрутка событие
• полоса прокрутки роль ARIA
• Термин глоссария спирального контейнера

Спецификация
Модуль CSS Scroll Snap Уровень 1

• Модуль переполнения CSS
• Модуль стилей полос прокрутки CSS
• Области прокрутки только с помощью клавиатуры на сайте adrianroselli.com (28 ноября 2022 г.)
• Примеры снимков прокрутки на Codepen (7 сентября 2022 г.)
• Хорошо контролируемая прокрутка с помощью привязки прокрутки CSS на web.