Html body width scroll

scrollbar-width

The scrollbar-width property allows the author to set the maximum thickness of an element’s scrollbars when they are shown.

Syntax

/* Keyword values */ scrollbar-width: auto; scrollbar-width: thin; scrollbar-width: none; /* Global values */ scrollbar-width: inherit; scrollbar-width: initial; scrollbar-width: revert; scrollbar-width: revert-layer; scrollbar-width: unset; 

Values

Defines the width of the scrollbar as a keyword. It must be one of the following values:

auto	The default scrollbar width for the platform.
thin	A thin scrollbar width variant on platforms that provide that option, or a thinner scrollbar than the default platform scrollbar width.
none	No scrollbar shown, however the element will still be scrollable.

Note: User Agents must apply any scrollbar-width value set on the root element to the viewport.

Accessibility concerns

Use this property with caution — setting scrollbar-width to thin or none can make content hard or impossible to scroll if the author does not provide an alternative scrolling mechanism. While swiping gestures or mouse wheels can enable scrolling on such content, some devices have no scroll alternative.

WCAG criterion 2.1.1 (Keyboard) has been in place for a long time to advise on basic keyboard accessibility, and this should include scrolling of content areas. And introduced in WCAG 2.1, criterion 2.5.5 (Target Size) advises that touch targets should be at least 44px in width and height (although the problem is compounded on high-resolution screens; thorough testing is advised).

Formal definition

Formal syntax

Источник

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:

Здесь легко заметить несколько различий по сравнению с устаревшей спецификацией —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

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

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

Ещё можно поэкспериментировать с CSS-градиентом, но этот вариант только для Webkit-браузеров:

Источник

Настройка полосы прокрутки в CSS

Полосу прокрутки можно стилизовать: сделать узкой или широкой, изменить цвет, скрыть. Это достаточно простая задача, но при её решении возникают подводные камни, связанные с кроссбраузерностью. Давайте разбираться, как сделать кастомный скроллбар правильно.

Постановка задачи

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

Решение находится быстро. В 2018 году появилась спецификация CSS Scrollbars , которая определяет настройку внешнего вида полосы. Этой спецификацией введены два новых свойства, которые влияют на визуальный стиль скроллбара:

Кажется, стилизации скроллбаров теперь делается за пять минут. Осталось проверить это на практике.

Применение свойств CSS Scrollbars

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

• бегунок (thumb), за который мы тянем, чтобы прокрутить страницу;
• дорожка (track), по которой перемещается бегунок.

Попробуем применить к ним свойства для стилизации внешнего вида. Сначала разберёмся с шириной элемента. У scrollbar-width три возможных значения:

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

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

Соединим оба свойства и получим такую стилизацию:

body scrollbar-width: thin; 
scrollbar-color: green black;
>

Выглядит очень просто. Проверяем в браузере Firefox.

Всё работает, полоса для скролла на странице стала чёрно-зелёной и тонкой.

Поддержка кроссбраузерности

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

Открываем стилизованную страницу в Google Chrome и видим, что полоса прокрутки осталась дефолтной. В Edge и Safari — тот же результат. Чтобы проверить свои подозрения, смотрим поддержку свойств CSS Scrollbars через Can I Use. Ситуация печальная. Спустя четыре года после представления спецификации удобная настройка полосы прокрутки недоступна в большинстве браузеров. Исключение — десктопная и мобильная версии Firefox.

Это что же, у нас не получится реализовать отрисованный дизайн и придётся всё менять?

Спокойно, решение есть. Для изменения визуального представления скроллбара в Chrome, Edge и Safari можно использовать псевдоэлементы:

• ::-webkit-scrollbar — параметры всего элемента навигации;
• ::-webkit-scrollbar-track — параметры дорожки.
• ::webkit-scrollbar-thumb — параметры бегунка.

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

body::-webkit-scrollbar width: 15px; /* Ширина всего элемента навигации */
>

body::-webkit-scrollbar-track background: #fff; /* Цвет дорожки */
>

body::-webkit-scrollbar-thumb background-color: #050c26; /* Цвет бегунка */ 
border-radius: 20px; /* Округление бегунка */ 
border: 3px solid #050c26; /* Оформление границ бегунка */
>

Из очевидных плюсов — можно явно определить ширину полосы. Вот такой скроллбар сделать можно только с помощью псевдоэлементов:

Огромное название Timeweb Cloud перекликается по цвету с очень широким скроллбаром. Отдельная спецификация для элемента scrollbar такой возможности не предполагает. Там выбор ограничен двумя вариантами — автоматический расчёт ширины или отображение тонкого элемента навигации (насколько это возможно, учитывая системные настройки).

Та же история с цветами. С помощью псевдоэлементов можно задавать не только цвета, но и градиенты. Немного изменим стиль бегунка:

body::-webkit-scrollbar-thumb background: linear-gradient(45deg, #EECFBA, #C5DDE8); 
border-radius: 20px; 
border: 3px solid #050c26;
>

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

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

Заключение

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

Источник

Стилизация Скролла

Сегодня будем стилизовать скролл с помощью CSS для webkit браузеров (Google Chrome / Safari / Opera / Яндекс.Браузер) и Mozilla Firefox. А так же рассмотрим изменение скролла при помощи плагина mCustomScrollbar.

Стилизация скролла для Mozilla Firefox

Чтобы изменить скролл в Firefox, используйте следующий код.

Первое значение scrollbar-color изменяет цвет ползунка, второе — цвет скроллбара.

Значения scrollbar-width изменят толщину (ширину — для вертикального скроллбара, высоту — для горизонтального):

• auto — толщина скролла по умолчанию;
• thin — более тонкий вариант скролла;
• none — скрыть скролл.

Пример. Обратите внимание, данный пример предназначен для просмотра в Firefox .

Выберите цвет скроллбара
Выберите цвет ползунка скроллбара
Выберите толщину скролла

Какой-то контент. Текст, изображения или что-то ещё.

Стилизация скролла для webkit браузеров

Чтобы стилизовать скролл для Google Chrome, Яндекс.Браузер, Safari и Opera используйте следующие CSS свойства.

/* полоса прокрутки (скроллбар) */ ::-webkit-scrollbar < width: 24px; /* ширина для вертикального скролла */ height: 8px; /* высота для горизонтального скролла */ background-color: #143861; >/* ползунок скроллбара */ ::-webkit-scrollbar-thumb < background-color: #843465; border-radius: 9em; box-shadow: inset 1px 1px 10px #f3faf7; >::-webkit-scrollbar-thumb:hover < background-color: #253861; >/* Стрелки */ ::-webkit-scrollbar-button:vertical:start:decrement < background: linear-gradient(120deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(240deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(0deg, #02141a 30%, rgba(0, 0, 0, 0) 31%); background-color: #f6f8f4; >::-webkit-scrollbar-button:vertical:end:increment < background: linear-gradient(300deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(60deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(180deg, #02141a 30%, rgba(0, 0, 0, 0) 31%); background-color: #f6f8f4; >::-webkit-scrollbar-button:horizontal:start:decrement < background: linear-gradient(30deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(150deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(270deg, #02141a 30%, rgba(0, 0, 0, 0) 31%); background-color: #f6f8f4; >::-webkit-scrollbar-button:horizontal:end:increment

mCustomScrollbar

Теперь рассмотрим, как кроссбраузерно стилизовать скролл при помощи плагина mCustomScrollbar.

Сначала скачайте архив и извлеките к себе в проект файлы:

• jquery.mCustomScrollbar.min.css
• jquery.mCustomScrollbar.concat.min.js
• mCSB_buttons.png

Затем подключите jQuery и файлы плагина.

Или же можете подключить все файлы через CDN jsdelivr:

Инициализация

Инициализация через JavaScript

Источник