Стилизация полосы прокрутки css: Как стилизовать или убрать полосу прокрутки — CSS скроллбар — Active-Vision

Содержание

Переполнение содержимого — Изучение веб-разработки

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

Мы уже знаем, что всё в CSS — блоки, и что мы можем ограничивать размер этих блоков, присваивая им определённое значение посредством width и height (или inline-size и block-size). Переполнение — это то, что случается, когда у вас слишком много контента в блоке, так что он не помещается в данный ограниченный размер. CSS даёт нам различные инструменты для управления переполнением, и это также полезная концепция для понимания на этой ранней стадии. Вы будете встречаться с переполнением достаточно часто, когда пишите CSS, особенно когда глубже погрузитесь в CSS раскладку.

Рассмотрим два примера, демонстрирующих поведение CSS по умолчанию при возникновении переполнения.

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

Второй пример — слово в блоке. Блок оказался слишком маленьким для этого слова, и поэтому оно выходит за его пределы.

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

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

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

Если вы ограничиваете поле с помощью параметров width

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

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

Свойство overflow

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

Значение overflow по умолчанию – visible, что означает — «показывать контент, когда он выходит за границы блока».

Чтобы обрезать контент выходящий за пределы блока, вы можете установить overflow: hidden. Это свойство делает именно то, о чём говорит: скрывает выходящий за пределы контент. Помните, что это может сделать часть содержимого невидимым. Используйте данное значение только в том случае, если скрытие содержимого не вызовет проблем.

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

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

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

В приведённом выше примере нам нужно прокручивать содержимое только по оси

y, однако мы получаем полосы прокрутки по обеим осям. Вы можете использовать свойство overflow-y (en-US), которое позволяет прокручивать содержимое только по оси y.

Вы также можете установить прокрутку по оси x с помощью overflow-x (en-US), но это не рекомендуемый способ отображения длинных слов! Если у вас есть длинное слово в маленьком поле, вы можете использовать свойства word-break или overflow-wrap. Кроме того, некоторые методы, описанные в разделе Изменение размеров в CSS, могут помочь вам создавать блоки, которые лучше масштабируются с различным объемом содержимого.

Как и в случае со scroll

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

Примечание: вы можете точно задать прокрутку по осям x и y, используя свойство overflow, передав два значения. Первое значение будет относиться к overflow-x, а второе — к overflow-y. Если передать одно значение, то overflow-x и overflow-y получат одинаковые значения. Например, overflow: scroll hidden устанавливает overflow-x в scroll и overflow-y в

hidden.

Если вы хотите, чтобы полосы прокрутки отображались только тогда, когда содержимого больше, чем может поместиться в поле, используйте overflow: auto. Это позволяет браузеру автоматически определять, следует ли отображать полосы прокрутки.

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

Когда вы используете значение overflow, такое как scroll или auto, вы создаете контекст форматирования блока (BFC). Содержимое блока, для которого вы установили параметр overflow приобретает автономную раскладку.

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

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

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

При разработке сайта всегда помните о переполнении. Тестируйте дизайны как с большим, так и с малым количеством контента. Проверяйте различные размеры шрифта текстов. Убедитесь, что ваш CSS работает надёжно. Изменение значения overflow для скрытия содержимого или добавления полос прокрутки, должно использоваться только при необходимости (например там, где вы хотите использовать прокручиваемый блок).

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

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

CSS3 | Прокрутка элементов

Прокрутка элементов

Последнее обновление: 21.04.2016

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

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

Однако свойство overflow позволяет настроить поведение блока в подобной ситуации и добавить возможность прокрутки. Это свойство может принимать следующие значения:

auto: если контент выходит за границы блока, то создается прокрутка. В остальных случаях полосы прокрутки не отображаются
hidden: отображается только видимая часть контента. Контент, который выходит за границы блока, не отображается, а полосы прокрутки не создаются
scroll: в блоке отображаются полосы прокрутки, даже если контент весь помещается в границах блока, и таких полос прокрутки не требуется
visible: значение по умолчанию, контент отображается, даже если он выходит за границы блока

Рассмотрим применение двух значений:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Прокрутка в CSS3</title>
        <style>
		. article1{
			width: 300px;
			height: 150px;
			margin:15px;
			border: 1px solid #ccc;
			overflow: auto;
		}
		.article2{
			width: 300px;
			height: 150px;
			margin:15px;
			border: 1px solid #ccc;
			overflow: hidden;
		}
        </style>
    </head>
    <body>
		<div>
		<p>Старый дуб, весь преображенный, раскинувшись шатром сочной, темной зелени, млел, чуть 
			колыхаясь в лучах вечернего солнца. Ни корявых пальцев, ни болячек, ни старого недоверия и 
			горя – ничего не было видно. Да, это тот самый дуб», – подумал князь 
			Андрей, и на него вдруг нашло беспричинное весеннее чувство радости и обновления.</p>
		</div>
		<div>
		<p>Старый дуб, весь преображенный, раскинувшись шатром сочной, темной зелени, млел, чуть 
			колыхаясь в лучах вечернего солнца. Ни корявых пальцев, ни болячек, ни старого недоверия и 
			горя – ничего не было видно.  Да, это тот самый дуб», – подумал князь 
			Андрей, и на него вдруг нашло беспричинное весеннее чувство радости и обновления.</p>
		</div>
	</body>
</html>

Свойство overflow управляет полосами прокрутки как по вертикали, так и по горизонтали. С помощью дополнительных свойств overflow-x и overflow-y можно определить прокрутку соответственно по горизонтали и по вертикали. Данные свойства принимают те же значения, что и overflow:


overflow-x: auto;
overflow-y: hidden;

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

Для Firefox 64 добавлена поддержка спецификаций проекта CSS для прокрутки Модуль 1, который добавляет два новых свойства]2 о скроллбара-ширина и полоса прокрутки-цвет, которые дают некоторый контроль над тем, как полосы прокрутки отображаются.

Вы можете установить полоса прокрутки-цвет одно из следующих значений (описания МДН):

режим «Auto» по умолчанию рендеринга платформы для отслеживания части полосы прокрутки, при отсутствии каких-либо других связанных с цветом свойства полосы прокрутки.
«темный» увидеть темную полосу прокрутки, которая может быть либо темный вариант прокрутки, предоставляемых платформой, или пользовательские полосы прокрутки с темными цветами.
свет показать светлую полосу прокрутки, которая может быть либо легкий вариант прокрутки платформы, или пользовательские полосы прокрутки в светлых тонах.
в <цвет> в <цвет> применяется первый цвет с ползунком, вторая полоса прокрутки трека.

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

под управлением macOS Примечания:

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

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

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

режим «Auto» по умолчанию скроллбара ширина для платформы.
«тонкие» тонкие ширина скроллбара вариант на платформах, которые обеспечивают такую возможность, или тоньше полосы прокрутки, чем платформа по умолчанию ширина полосы прокрутки.
«нет» не отображается полоса прокрутки, но элемент все равно будет прокручивать.

Вы также можете установить определенное значение длина, согласно спецификации. Как «тонкие» и определенной длины может не делать ничего на всех платформах, и что именно она делает, это платформы. В частности, в Firefox не’т, кажется, поддерживают определенное значение длина (этот комментарий на их багтрекер, кажется, подтверждает это). Тонко клапанам, кажется, хорошо поддерживается, однако с macOS и Windows, поддержка по-крайней мере.

Это’s наверное стоит отметить, что параметр значения длина и всю скроллбара-ширина собственность рассматриваются для удаления в будущем проекте, и если что случится данное конкретное свойство может быть удалено из Firefox в будущих версиях.

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

скролл — стилизация полосы прокрутки css

Как насчет обертки с переполнением авто и 100% обманом. Т.е. какой-то вариант этого:

<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
        <meta charset="utf-8"/> 
        <title>100% thing</title> 
        <style> 
          * {
            margin: 0;
            padding: 0;
          }
          html, body {
            height: 100%;
            overflow: hidden;
          }
          #wrapper {
            height: 100%;
            width: 200px;
            overflow: auto;
          }
        </style> 
    </head> 
    <body> 
        <div> 
            <div> 
                <p>To Sherlock Holmes she is always <i>the</i> woman. I have seldom heard
him mention her under any other name. In his eyes she eclipses
and predominates the whole of her sex.  It was not that he felt
any emotion akin to love for Irene Adler. All emotions, and that
one particularly, were abhorrent to his cold, precise but
admirably balanced mind. He was, I take it, the most perfect
reasoning and observing machine that the world has seen, but as a
lover he would have placed himself in a false position. He never
spoke of the softer passions, save with a gibe and a sneer. They
were admirable things for the observer&#8212;excellent for drawing the
veil from men&#8217;s motives and actions. But for the trained reasoner
to admit such intrusions into his own delicate and finely
adjusted temperament was to introduce a distracting factor which
might throw a doubt upon all his mental results. Grit in a
sensitive instrument, or a crack in one of his own high-power
lenses, would not be more disturbing than a strong emotion in a
nature such as his. And yet there was but one woman to him, and
that woman was the late Irene Adler, of dubious and questionable
memory.
<p> 
I had seen little of Holmes lately.  My marriage had drifted us
away from each other. My own complete happiness, and the
home-centred interests which rise up around the man who first
finds himself master of his own establishment, were sufficient to
absorb all my attention, while Holmes, who loathed every form of
society with his whole Bohemian soul, remained in our lodgings in
Baker Street, buried among his old books, and alternating from
week to week between cocaine and ambition, the drowsiness of the
drug, and the fierce energy of his own keen nature. He was still,
as ever, deeply attracted by the study of crime, and occupied his
immense faculties and extraordinary powers of observation in
following out those clues, and clearing up those mysteries which
had been abandoned as hopeless by the official police. From time
to time I heard some vague account of his doings: of his summons
to Odessa in the case of the Trepoff murder, of his clearing up
of the singular tragedy of the Atkinson brothers at Trincomalee,
and finally of the mission which he had accomplished so
delicately and successfully for the reigning family of Holland. 
Beyond these signs of his activity, however, which I merely
shared with all the readers of the daily press, I knew little of
my former friend and companion.
<p> 
One night&#8212;it was on the twentieth of March, 1888&#8212;I was
returning from a journey to a patient (for I had now returned to
civil practice), when my way led me through Baker Street. As I
passed the well-remembered door, which must always be associated
in my mind with my wooing, and with the dark incidents of the
Study in Scarlet, I was seized with a keen desire to see Holmes
again, and to know how he was employing his extraordinary powers.
His rooms were brilliantly lit, and, even as I looked up, I saw
his tall, spare figure pass twice in a dark silhouette against
the blind. He was pacing the room swiftly, eagerly, with his head
sunk upon his chest and his hands clasped behind him. To me, who
knew his every mood and habit, his attitude and manner told their
own story. He was at work again. He had risen out of his
drug-created dreams and was hot upon the scent of some new
problem.  I rang the bell and was shown up to the chamber which
had formerly been in part my own.
            </div> 
        </div> 
    </body> 
</html>

Смотрите демонстрацию на jsFiddle .

КАК: Создание окна с прокруткой текста с помощью CSS и HTML

Окно прокрутки HTML — это окно, которое добавляет полосы прокрутки вправо и снизу, когда содержимое поля больше размеров окна. Другими словами, если у вас есть поле, которое может поместиться около 50 слов, и у вас есть текст из 200 слов, в окне прокрутки HTML будут добавлены полосы прокрутки, чтобы вы могли видеть дополнительные 150 слов. В стандартном HTML, который просто нажимает дополнительный текст вне поля.

Создание прокрутки HTML довольно просто. Вам просто нужно установить ширину и высоту элемента, который вы хотите прокрутить, а затем использовать свойство переполнения CSS, чтобы указать, как вы хотите прокручивать.

Что делать с дополнительным текстом?

Когда у вас больше текста, чем будет помещено в пространство на вашем макете, у вас есть несколько вариантов:

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

Лучшим вариантом является, как правило, последний вариант: создать прокручиваемое текстовое поле. Затем дополнительный текст все еще можно прочитать, но ваш дизайн не скомпрометирован.

HTML и CSS для этого:

текст здесь ….

название	Телефон
Дженнифер	502-5366

название	Телефон
Дженнифер	502-5366

переполнение: авто;
говорит браузеру добавлять полосы прокрутки, если они необходимы для того, чтобы текст переполнял границы div. Но для того, чтобы это сработало, вам также нужны свойства стиля ширины и высоты, установленные на div, так что есть границы для переполнения.
Вы также можете отрезать текст, изменив переполнение: auto; to overflow: hidden ;. Если вы оставите свойство переполнения, текст будет разливаться по границам div.
Вы можете добавить полосы прокрутки в более, чем просто текст
Если у вас есть большое изображение, которое вы хотите отображать на меньшем пространстве, вы можете добавить вокруг него полосы прокрутки так же, как и с текстом.
В этом примере изображение 400×509 находится внутри абзаца 300×300.
Таблицы могут быть полезны из прокрутки
Длинные таблицы информации могут быть очень трудными для чтения очень быстро, но, помещая их в div ограниченного размера, а затем добавляя свойство переполнения, вы можете создавать таблицы с большим количеством данных, которые не занимают экстремального пространства на вашей странице ,
Самый простой способ — это как изображение и текст, просто добавьте div вокруг таблицы, установите ширину и высоту этого div и добавьте свойство переполнения:
….
название Телефон
Дженнифер 502-5366
Одна вещь, которая возникает, когда вы это делаете, — это горизонтальная полоса прокрутки, которая обычно появляется, потому что браузер предполагает, что хром полос прокрутки перекрывает таблицу. Существует множество способов исправить это из-за изменения ширины таблицы и других. Но моим фаворитом является просто отключить горизонтальную прокрутку с помощью свойства CSS 3
Переполнение-х
, Просто добавь
переполнение-x: скрыто;
к div, и это приведет к удалению горизонтальной полосы прокрутки. Обязательно проверьте это, поскольку может исчезнуть контент, который исчезнет.
Firefox поддерживает использование тегов TBODY для переполнения
Одна действительно приятная особенность браузера Firefox заключается в том, что вы можете использовать свойство переполнения во внутренних табличных тегах, таких как tbody и thead или tfoot. Это означает, что вы можете установить полосы прокрутки в содержимом таблицы, а ячейки заголовка оставаться на якоре над ними. Это работает только в Firefox, что слишком плохо, но это приятная функция, если ваши читатели используют только Firefox. Перейдите к этому примеру в Firefox, чтобы понять, что я имею в виду.
…
название Телефон
Дженнифер 502-5366

лучшие пользовательские плагины браузера 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.

Глава 14

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

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

В качестве элементов могут выступать любые блоки, в которых гипотетически может появляться полоса прокрутки <div>, <textarea>, <iframe> и т.д.. в том числе и сама страница — тег <body>.

В таблице ниже перечислены все свойства CSS из семейства scrollbar, а также показан результат применения этих свойств.

Ну вот Вам ещё и рисунок для наглядности:

Возможные значения свойств из семейства scrollbar:

#ff0000 — Шестнадцатеричное значение цвета RGB.
red — Именное значение цвета.
RGB(255, 0, 0) — Значение цвета RGB.
inherit — применяется значение родительского элемента.(по умолчанию)

Пример:

Файл primer3.css
body{
background-color: #fff8dc;
scrollbar-3dlight-color: #ffebcd;
scrollbar-arrow-color: #ffffff;
scrollbar-base-color: #ffebcd;
scrollbar-darkshadow-color: #f5f5dc;
scrollbar-face-color: #b8860b;
scrollbar-highlight-color: #f5f5dc;
scrollbar-shadow-color: #f5f5dc;
scrollbar-track-color: #f5f5dc;
}
div{
padding: 20px;
overflow: auto;
width: 200px;
height: 100px;
border: solid 2px #deb887;
background-color: #ffffff;
}

Файл index. html
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»>
<html>
<head>
<title>Полоса прокрутки</title>
<link rel=»stylesheet» href=»primer3.css» type=»text/css»>
</head>
<body>
<div>
<h4 align=»center»>Диктант</h4>
На террасе, близ конопляника, небезызвестная вдова Агриппина Саввична, потчевала, отставного коллежского асессора Аполлона Карповича, моллюсками, под аккомпанемент виолончели.
</div>
 
 
 
 
</body>
</html>

Хочу отметить, что свойства CSS из семейства scrollbar являются расширением спецификации CSS2, введенным компаний Microsoft, и реализованным в браузерах Internet Explorer начиная с версии IE 5. 5, соответственно другие браузеры, на тот момент, полностью игнорировали данное свойство. Но прошло время и многие браузеры стали подстраиваться под это дополнение к спецификации от Microsoft.

Однако, до сих пор всё не так уж гладко! Так что во многих браузерах стиль полосы прокрутки или игнорируется или работает не совсем корректно.. например многие игнорируют данное свойство для тега <body> или не понимают некоторые отдельные свойства скроллбара.

Ниже приведу несколько советов, которые возможно помогут решить данную проблему в тех или иных браузерах. Употребляю слово «возможно» потому что очень трудно отследить в динамике за всеми изменениями разных браузеров. Мир не стоит на месте каждый день, там или здесь, что-то меняется! Жаль вот только что кроссбраузерность всегда остаётся головной болью!

Но что то я заговорился.. Итак, ряд «таблеток»:

1. По возможности используйте вот такой заголовок <!DOCTYPE>:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4. 01 Transitional//EN»>

2. Указывайте свойства скроллбара не только для тега <body> но и для тега <html>

Вот так:

html,body{
scrollbar-3dlight-color: #ffebcd;
scrollbar-arrow-color: #ffffff;
}

3. Попробуйте, если это более менее рационально для Вашего сайта, внедрять стили полосы прокрутки используя атрибут style, а не одноименный тег в «голове» документа или внешний css файл

Вот так:

<div>блок</div>

Возможно, данные рекомендации сработают в некоторых браузерах, в любом случае в IE (начиная с версии 5.5) всё будет работать корректно, а раз хоть где-то работает это уже хорошо!

Так как scrollbar является одним из важных элементов интерфейса, постарайтесь не вести пользователя в заблуждение, используя совсем уж нестандартный дизайн полосы прокрутки.
Если Вам прямо таки совсем необходим нестандартный скроллбар, не только нестандартный цвет, он и нестандартная форма, да и еще и работающий во всех браузерах используйте скрипты, но не забывайте про первый совет!!
В браузере внешний вид полосы прокрутки черпается из настроек Windows и например у меня, она имеет вот такой вид:
Но как только Вы примените к полосе прокрутки любое свойство из семейства scrollbar, связь с настройками Windows потеряется, точнее станет «по умолчанию» и полоса приобретёт вот такой вид:

Как стилизовать полосы прокрутки с помощью CSS. Вы когда-нибудь посещали веб-сайт с… | Нирмани Варакаулла | Nerd For Tech

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

Плюсы и минусы пользовательской полосы прокрутки

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

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

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

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

С другой стороны, если вы думаете о внедрении пользовательской полосы прокрутки на работе или в каком-то проекте, где вы хотите зарабатывать деньги, вам следует попробовать A/B-тестирование и принять решение на основе данных на основе результатов.

В конце концов, большинство из нас пишет код для увеличения доходов бизнеса, поэтому вам всегда нужно помнить об этом.

В сентябре 2018 г. W3C CSS Scrollbars определил спецификации для настройки внешнего вида полос прокрутки с помощью CSS.

По состоянию на 2020 год 96% пользователей Интернета используют браузеры, поддерживающие стиль полосы прокрутки CSS.Однако вам нужно будет написать два набора правил CSS для поддержки браузеров Blink и WebKit, а также Firefox.

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

Предварительные требования

Прежде чем следовать этой статье, вам потребуется:

«Префиксы поставщиков» — это способ поддержки браузером новых функций CSS до того, как они станут полностью поддерживаться во всех браузерах.
«Изящная деградация» — это стратегия управления дизайном веб-страниц для различных браузеров, как старых, так и новых.
«Псевдоэлементы» — это ключевые слова, добавленные в селектор, который позволяет вам стилизовать определенную часть выбранного элемента (элементов). Ниже приведены некоторые из «псевдоэлементов», которые вы должны использовать для Chrome, Safari:

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

Стилизация полос прокрутки в Chrome, Edge и Safari

В настоящее время стилизация полос прокрутки для Chrome, Edge и Safari доступна с префиксом поставщика псевдоэлемента -webkit-scrollbar .

Вот пример, который использует ::-webkit-scrollbar , ::-webkit-scrollbar-track и ::webkit-scrollbar-thumb псевдоэлементы:

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

Вот скриншот полосы прокрутки, созданной с помощью этих правил CSS:

Этот код работает в последних версиях Chrome, Edge и Safari.

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

Стилизация полос прокрутки в Firefox

В настоящее время стилизация полос прокрутки для Firefox доступна с новыми полосами прокрутки CSS.

Вот пример, который использует свойства scrollbar-width и scrollbar-color :

 body { 
 scrollbar-width: thin; /* "авто" или "тонкий" */ 
 цвет полосы прокрутки: синий оранжевый; /* Scroll thumb and track */ 
 }

Вот скриншот полосы прокрутки, созданной с помощью следующих правил CSS:

Эта спецификация имеет некоторые общие черты со спецификацией -webkit-scrollbar для управления цветом полосы прокрутки. .Однако в настоящее время нет поддержки для изменения заполнения и округлости для «ползунка дорожки».

Создание перспективных стилей полос прокрутки

Вы можете написать свой CSS так, чтобы он поддерживал спецификации -webkit-scrollbar и CSS Scrollbars .

Вот пример, который использует ширину полосы прокрутки , цвет полосы прокрутки , ::-webkit-scrollbar , ::-webkit-scrollbar-track , :: webkit-scrollbar-03thumb 9:

 /* Работает в Firefox */ 
 * { 
 ширина полосы прокрутки: тонкая; 
 цвет полосы прокрутки: сине-оранжевый; 
 }/* Работает в Chrome, Edge и Safari */ 
 *::-webkit-scrollbar { 
 width: 12px; 
 }*::-webkit-scrollbar-track { 
 фон: оранжевый; 
 }*::-webkit-scrollbar-thumb { 
 background-color: blue; 
 радиус границы: 20 пикселей; 
 граница: 3 пикселя сплошного оранжевого цвета; 
 }

Браузеры Blink и WebKit будут игнорировать правила, которые они не распознают, и применять правила -webkit-scrollbar . Браузеры Firefox будут игнорировать правила, которые они не распознают, и применять правила CSS Scrollbars . Как только браузеры Blink и WebKit полностью откажутся от спецификации -webkit-scrollbar , они изящно вернутся к новой спецификации CSS Scrollbars .

`Заключение`

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

Также можно имитировать полосу прокрутки, скрыв полосу прокрутки по умолчанию и используя JavaScript для определения высоты и положения прокрутки.Однако эти подходы наталкиваются на ограничения при воспроизведении таких процессов, как инерционная прокрутка (например, затухание движения при прокрутке с помощью трекпадов).

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

`Модуль стилей полос прокрутки CSS, уровень 1`

 Модуль стилей полос прокрутки CSS, уровень 1 Аннотация 
 Этот модуль CSS определяет свойства  влиять на визуальный стиль полос прокрутки,
 введения элементов управления для их цвета и ширины. CSS — это язык для описания рендеринга структурированных документов.
(например, HTML и XML)
на экране, на бумаге и т. Статус этого документа 
  В этом разделе описывается состояние этого документа на момент его публикации.
Список текущих публикаций W3C
и последняя редакция этого технического отчета
можно найти в указателе технических отчетов W3C по адресу https://www.w3.org/TR/. 
 Этот документ был опубликован
Рабочей группой CSS в качестве -кандидатной рекомендации Snapshot  с использованием Рекомендации
 отслеживать.Публикация в качестве кандидата в рекомендации
не подразумевает одобрения  W3C  и его членов. Снимок рекомендации кандидата получил широкий обзор,
предназначен для сбора опыта реализации и имеет обязательства членов рабочей группы по бесплатному лицензированию реализации.
Этот документ призван стать Рекомендацией W3C;
он останется кандидатом в рекомендации по крайней мере до  7 февраля 2022 года  для сбора дополнительных отзывов.
 Пожалуйста, отправьте отзыв
путем регистрации вопросов в GitHub (предпочтительно),
включая код спецификации «css-scrollbars» в заголовке, например:
«[css-scrollbars]  …резюме комментария…  ».
Все вопросы и комментарии архивируются.
В качестве альтернативы, отзывы можно отправить в (заархивированный) общедоступный список рассылки [email protected].
 Этот документ регулируется технологическим документом W3C от 2 ноября 2021 года.
 Этот документ был подготовлен группой, работающей в рамках патентной политики W3C.W3C ведет общедоступный список любых раскрытий патентов, сделанных в связи с результатами работы группы;
эта страница также содержит инструкции по раскрытию патента. Лицо, имеющее фактическое знание патента, который, по мнению этого лица,
содержит Существенные пункты формулы изобретения, должны раскрывать информацию в соответствии с разделом 6 Патентной политики W3C.
 Содержание 
 1. Введение 1.1 Область применения 1.1.1 Вне области применения
 1.2 Определения значений
 2 Цвета полосы прокрутки: свойство цвета полосы прокрутки
 3 Толщина полосы прокрутки: свойство ширины полосы прокрутки
 Приложение A. Благодарности
 Приложение Б. Изменения Изменения по сравнению с рабочим проектом от 2 декабря 2021 г.
 Изменения по сравнению с рабочим проектом от 05 августа 2021 г.
 Изменения по сравнению с первым публичным рабочим проектом от 25 сентября 2018 г.
 Приложение С. Вопросы безопасности и конфиденциальности Вопросы безопасности
 Вопросы конфиденциальности
 Анкета для самопроверки
 Приложение D. Вопросы доступности
 Соответствие Условные обозначения документов
 Классы соответствия
 Частичные реализации Реализации нестабильных и проприетарных функций
 Неэкспериментальные реализации
 Критерии выхода CR
 Показатель Термины, определенные данной спецификацией
 Термины, определенные ссылкой
 использованная литература Нормативные ссылки
 Информативные ссылки
 Индекс собственности
 1.Введение 
  Этот раздел не является нормативным. 
 Этот модуль CSS вводит свойства
влиять на визуальный стиль полос прокрутки,
включая их цвет (цвет полосы прокрутки)
и толщина (ширина полосы прокрутки).
 1.1. Объем 
 Модуль CSS Scrollbars специально предназначен для стилизации самих элементов управления полосы прокрутки,
например их цвет и ширина на уровне 1, а не их макет и возможность прокрутки любого содержимого.Все воздействия макета и возможность прокрутки содержимого указаны в модуле CSS Overflow.
 На основе задокументированных вариантов использования,
есть три основных варианта использования полос прокрутки, которые этот модуль намеревается разрешить:
 Раскрашивание полос прокрутки для лучшего соответствия пользовательскому интерфейсу веб-приложения.
 Использование более тонкой полосы прокрутки, когда область прокрутки мала.
 Скрытие полос прокрутки, предоставляемых UA,
 разрешить предоставление настраиваемых интерфейсов для прокрутки
 без ущерба для других аспектов прокрутки.
 1.1.1. Вне области 
 Внутренняя структура, расположение и конфигурация полос прокрутки,
а также точный контроль над их окраской, выходит за рамки.
Это связано с тем, что разные платформы
различные структуры полос прокрутки и соглашения о стилях,
и операционные системы постоянно совершенствуют дизайн своих полос прокрутки.
чтобы обеспечить лучший пользовательский опыт.
Псевдоэлементы для выбора определенных частей полосы прокрутки,
Например,
были рассмотрены и отклонены.Хотя такой уровень точного контроля был бы заманчивым для авторов,
на расположение различных частей —  или даже на то, присутствуют ли они все —  нельзя полагаться.
Предоставление слишком большого контроля позволило бы авторам получать отличные результаты на некоторых платформах,
но за счет сломанных результатов на других.  
 Примечание. Отображение связанных с полосой прокрутки псевдоэлементов  ::-webkit-  с префиксом в Интернете
считается ошибкой как рабочей группой CSS, так и Webkit.
 1.2. Определения значений 
 Эта спецификация следует соглашениям об определении свойств CSS из [CSS2] с использованием синтаксиса определения значений из [CSS-VALUES-3].
 Типы значений, не определенные в этой спецификации, определены в значениях и единицах CSS [CSS-VALUES-3].
 Комбинация с другими модулями CSS может расширить определения этих типов значений.
 В дополнение к значениям свойств, перечисленным в их определениях,
 все свойства, определенные в этой спецификации
 также принимать ключевые слова CSS в качестве значения свойства.Для удобства чтения они не повторялись явно.
 Это свойство позволяет автору устанавливать цвета полос прокрутки элемента.
 UA должны применять значение цвета полосы прокрутки, установленное в корневом элементе, к области просмотра.
 Примечание. В отличие от свойств переполнения (и переполнения-*),
значение цвета полосы прокрутки, установленное в элементе body HTML, не распространяется на область просмотра.
  авто 
 Пользовательский агент определяет цвета полосы прокрутки.Он должен следовать соглашениям платформы,
но может настраивать цвета в соответствии с цветовой схемой или другой контекстной информацией
чтобы лучше соответствовать странице.
  <цвет> 
 применить первый цвет к бегунку полосы прокрутки,
а второй цвет на дорожку полосы прокрутки.
 Детали:
 Трек относится к фону полосы прокрутки,
который обычно фиксируется независимо от положения прокрутки.
 Большой палец относится к движущейся части полосы прокрутки,
который обычно плавает поверх дорожки.
 Если это свойство вычисляется до значения, отличного от auto,
реализации могут отображать более простую полосу прокрутки, чем рендеринг пользовательского интерфейса платформы по умолчанию,
и раскрасить соответственно.
 Примечание. Иногда ПА не может настроить цвета собственных полос прокрутки,
возможно, из-за того, как они структурированы,
или к отсутствию контроля, предоставляемого родным набором инструментов.Вышеприведенное положение позволяет ПА заменять их полосами прокрутки другой конструкции,
который он умеет раскрашивать.
 (Примечание: добавьте диаграмму, показывающую части с разными названиями — что-то вроде http://www.howtocreate.co.uk/tutorials/scrlbar.html)
 (Примечание: добавьте пример элемента переполнения с цветными полосами прокрутки в соответствии со стилем страницы,
PNG того же в браузере, который поддерживает его в настоящее время)
 Реализации могут игнорировать любой из цветов
если соответствующая часть не существует на базовой платформе.
 При использовании свойства цвета полосы прокрутки с определенными значениями цвета
авторы должны убедиться, что указанные цвета имеют достаточный контраст между собой. Для значений ключевых слов UA должны убедиться, что используемые ими цвета имеют достаточную контрастность.
См. WCAG 2.1 SC 1.4.11 Нетекстовый контраст [WCAG21].
UA могут игнорировать эти требования к контрасту на основе явных пользовательских предпочтений.
(например, когда пользователи выбирают вариант/настройку конфигурации,
всегда обеспечивает определенный цвет полосы прокрутки/использование системных полос прокрутки по умолчанию).
 Примечание: когда пользователь взаимодействует с полосой прокрутки (например, наводит или активирует),
реализации могут изменить, какие цвета полосы прокрутки применяются к каким частям полосы прокрутки.
 Примечание. IE использует именованные системные цвета по умолчанию для каждого свойства цвета полосы прокрутки.
См. соответствующий выпуск 1956.
 Это свойство позволяет автору указать
желаемая толщина полос прокрутки элемента. Основное назначение этого объекта не
чтобы позволить авторам выбирать определенную эстетику полосы прокрутки для своих страниц,
но позволить им указывать для определенных мелких или тесных элементов своих страниц
что желательна меньшая полоса прокрутки. Полосы прокрутки — это механизм пользовательского интерфейса, необходимый для взаимодействия со страницей.
Операционные системы, как правило, требуют согласованности в таких элементах управления, чтобы улучшить удобство использования за счет знакомства,
и пользователи с особыми предпочтениями или потребностями могут настроить
внешний вид различных компонентов пользовательского интерфейса, включая полосы прокрутки,
через настройки ОС или UA.
 Хотя использование этого свойства для поддержки определенных целей UX уместно,
в противном случае авторам следует воздерживаться от переопределения таких пользовательских настроек.
  авто 
 Реализации должны использовать ширину полосы прокрутки по умолчанию. Примечание. В большинстве систем это соответствует традиционной широкой полосе прокрутки.
Однако через настройки ОС или UA
пользователи могут иметь возможность изменить то, чему соответствует это значение по умолчанию,
возможно сделать полосу прокрутки по умолчанию
шире или уже, чем обычно.
  тонкий 
 Реализации должны использовать более тонкие полосы прокрутки, чем auto.Это может означать тонкий вариант полосы прокрутки, предоставляемый платформой,
или пользовательская полоса прокрутки тоньше, чем полоса прокрутки платформы по умолчанию.
Тем не менее, полоса прокрутки должна оставаться достаточно широкой, чтобы ее можно было использовать.
(Исполнители могут обратиться к WCAG 2.1 SC 2.5.5 Целевой размер. [WCAG21]) Примечание. Пользовательские агенты могут использовать различные стратегии
для обеспечения удобства использования узких полос прокрутки.
Например, в случае полос прокрутки с наложением
они могут динамически увеличивать полосу прокрутки
в ответ на попытку пользователя взаимодействовать с ним.Пользовательские агенты на устройствах с сенсорными экранами
также можно настроить, как они интерпретируют касания пальцев
для облегчения взаимодействия с визуально маленькими сенсорными мишенями.
 Пользовательские агенты могут игнорировать это значение и рассматривать его как автоматическое,
например, когда пользователь указал на дискомфорт
для тонких полос прокрутки через некоторые настройки UA или ОС.
(Пользовательским агентам рекомендуется предоставлять такую настройку.)
 Примечание. Некоторые платформы по умолчанию имеют только крошечную полосу прокрутки.
который нельзя разумно сделать тоньше.В таких случаях это значение будет вести себя как auto.
  нет 
 Реализации не должны отображать полосу прокрутки,
однако возможность прокрутки элемента другими способами не затрагивается. Использование этого значения может запретить пользователям, использующим только мышь, возможность прокрутки.
Авторы должны убедиться, что пользователи, использующие только мышь, по-прежнему могут получить доступ к скрытому контенту,
даже если у них нет колеса прокрутки. Авторы, которые не используют ничего, должны предоставить альтернативную/эквивалентную визуальную подсказку, которая
прокрутка возможна и есть больше контента. Примечание. В ситуациях, когда элемент должен прокручиваться  только  программными средствами,
а не путем прямого манипулирования пользователем,
авторам следует использовать overflow: hidden вместо scrollbar-width: none. Примечание. Пользователи, которые считают тонкие полосы прокрутки непригодными для использования.
могут включать следующее правило в свою таблицу стилей пользователя:  * {ширина полосы прокрутки: авто !важно;}  
 Это гарантирует, что все полосы прокрутки имеют размер в соответствии с настройками ОС и UA.
независимо от стиля автора.
 UA должны применять значение ширины полосы прокрутки, установленное в корневом элементе, к области просмотра.

Примечание. В отличие от свойства переполнения (и его сокращений), значение ширины полосы прокрутки, установленное в элементе body HTML , не распространяется на область просмотра.

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

`Приложение А.Благодарности`

Это приложение не является нормативным .

Спасибо Табу Аткинсу и Сидорну Куану за примеры использования, прототипирование, реализацию и отзывы. Благодаря обзору доступности и вкладу (#3315) от Патрика Х. Лауке.

`Приложение B. Изменения`

Это приложение не является нормативным .

`Изменения по сравнению с рабочим проектом`

 от 2 декабря 2021 г. Изменения по сравнению с рабочим проектом 
 от 05 августа 2021 г. Изменения по сравнению с первым общедоступным рабочим проектом 
 от 25 сентября 2018 г. #6538:
 удалены светлые и темные значения цвета полосы прокрутки, чтобы позволить ПА настраивать авто в соответствии с цветовой схемой или другой контекстной информацией.
 #3237:
 вычисляемое значение цвета полосы прокрутки изменено на: указанное ключевое слово или два вычисленных цвета
 #4693:
 Уточненная область применения: стилизация самих элементов управления полосой прокрутки, отсутствие макета или возможности прокрутки.
 #3315:
 Дополнительные и обновленные соображения доступности для цвета полосы прокрутки и ширины полосы прокрутки.
 Приложение C. Вопросы безопасности и конфиденциальности 
 Это приложение  не является нормативным  .
 Вопросы безопасности 
 Для данной спецификации не выявлено особых проблем с безопасностью.
 Вопросы конфиденциальности 
 Для этой спецификации не было выявлено особых проблем, связанных с конфиденциальностью.
 Анкета для самопроверки 
 Согласно опроснику для самопроверки: Безопасность и конфиденциальность: вопросы для рассмотрения
 Относится ли эта спецификация к информации, позволяющей установить личность? №
 Эта спецификация имеет дело с ценными данными? №
 Вводит ли эта спецификация новое состояние для источника, которое сохраняется во время сеансов просмотра? №
 Предоставляет ли эта спецификация постоянное, независимое от источника состояние в Интернете? №
 Предоставляет ли эта спецификация какие-либо другие данные источнику, к которому у него в настоящее время нет доступа? №
 Включает ли эта спецификация новые механизмы выполнения/загрузки скриптов? №
 Разрешает ли эта спецификация источнику доступ к местоположению пользователя? №
 Разрешает ли эта спецификация источнику доступ к датчикам на устройстве пользователя? №
 Разрешает ли эта спецификация источнику доступ к аспектам локальной вычислительной среды пользователя? №
 Разрешает ли эта спецификация источнику доступ к другим устройствам? №
 Позволяет ли эта спецификация источнику в какой-то степени контролировать собственный пользовательский интерфейс пользовательского агента? Да. Свойства полосы прокрутки-* позволяют странице изменять цвет и ширину полосы прокрутки.
собственного пользовательского интерфейса пользовательского агента, например. полосы прокрутки в окне страницы, на фреймовом содержимом, встроенном в страницу,
или на переполненных элементах с полосами прокрутки на странице.
 Предоставляет ли эта спецификация временные идентификаторы в Интернете? №
 Делает ли эта спецификация различие между поведением в первом и стороннем контекстах? №
 Как эта спецификация должна работать в контексте режима «инкогнито» пользовательского агента? Не иначе.
 Сохраняет ли эта спецификация данные на локальном устройстве пользователя? №
 Есть ли в этой спецификации разделы «Вопросы безопасности» и «Вопросы конфиденциальности»? Да.
 Позволяет ли эта спецификация понизить характеристики безопасности по умолчанию? №
 Приложение D.
 Вопросы доступности Это приложение  не является нормативным  . Как указано в определении имущества,
авторы должны помнить о последствиях доступности
использования ширины полосы прокрутки: тонкий.Полосы прокрутки являются важной частью интерфейса пользовательского агента.
и автору веб-сайта не следует изменять их размер по эстетическим соображениям.
Имущество доступно для поддержки случаев
где автор хочет указать, что в тесном месте веб-страницы
тонкая полоса прокрутки была бы более эффективным использованием пространства.
Однако, в конечном счете, пользователь через свой пользовательский агент
последнее слово в таких вещах. Использование этого свойства в таких случаях предпочтительнее, чем
авторы, создающие пользовательскую тонкую полосу прокрутки с помощью скрипта или проприетарных расширений,
потому что это дает пользователю возможность переопределить его.
 Пользовательские таблицы стилей предоставляют такое переопределение,
и, кроме того, пользовательские агенты поощряются к раскрытию настройки
позволяя пользователям выражать свое нежелание использовать тонкие полосы прокрутки.
 Рабочая группа CSS также признает потребности некоторых пользователей.
иметь полосы прокрутки, которые шире, чем обычно.
Операционные системы и пользовательские агенты могут предложить средства, позволяющие пользователям выражать свои предпочтения.
и в таких случаях CSS выполнит этот выбор.
 Соответствие 
 Условные обозначения документов 
 Требования соответствия выражаются комбинацией
 описательные утверждения и терминология RFC 2119.Ключевые слова «ОБЯЗАТЕЛЬНО»,
 «НЕ ДОЛЖЕН», «ТРЕБУЕТСЯ», «ДОЛЖЕН», «НЕ ДОЛЖЕН», «ДОЛЖЕН», «НЕ ДОЛЖЕН»,
 «РЕКОМЕНДУЕТСЯ», «МОЖЕТ» и «ДОПОЛНИТЕЛЬНО» в нормативных частях настоящего
 document должны интерпретироваться, как описано в RFC 2119.
 Однако для удобства чтения эти слова не отображаются в верхнем регистре.
 буквы в этой спецификации.
 Весь текст данной спецификации является нормативным, за исключением разделов
 явно помечены как ненормативные, примеры и примечания. [RFC2119]
 Примеры в этой спецификации вводятся словами «например».
 или отделены от нормативного текста с помощью  class="example"  ,
 вот так:
 Это пример информативного примера.
 Информационные примечания начинаются со слова «Примечание» и отделяются от
 нормативный текст с  class="note"  , например:
 Обратите внимание, это информативное примечание.
 Рекомендации представляют собой нормативные разделы, оформленные таким образом, чтобы привлечь особое внимание и
 отделить от другого нормативного текста с помощью    , например
 это:  UA ДОЛЖНЫ предоставлять доступную альтернативу. 
 Классы соответствия 
 Соответствие этой спецификации
 определен для трех классов соответствия:
 таблица стилей
 А УС
 таблица стилей.
 визуализатор
 UA, который интерпретирует семантику таблицы стилей и отображает
 документы, в которых они используются.
 авторский инструмент
 UA, записывающий таблицу стилей.
 Таблица стилей соответствует этой спецификации
 если все его операторы, которые используют синтаксис, определенный в этом модуле, действительны
 в соответствии с общей грамматикой CSS и индивидуальными грамматиками каждого
 функция, определенная в этом модуле.
 Средство визуализации соответствует этой спецификации.
 если, в дополнение к интерпретации таблицы стилей, как определено
 соответствующие спецификации, он поддерживает все функции, определенные
 по этой спецификации, правильно разбирая их
 и рендеринга документа соответственно. Однако неспособность А.
 UA для правильного отображения документа из-за ограничений устройства
 не делает UA несовместимым. (Например, UA не
 требуется для передачи цвета на монохромном мониторе.)
 Средство разработки соответствует этой спецификации.
 если он пишет таблицы стилей, которые синтаксически правильны в соответствии с
 общая грамматика CSS и отдельные грамматики каждой функции в
 этот модуль и отвечает всем остальным требованиям соответствия таблиц стилей
 как описано в этом модуле.
 Частичные реализации 
 Чтобы авторы могли использовать правила синтаксического анализа с прямой совместимостью для
 назначать резервные значения, средства визуализации CSS  должны  считать недействительными (и игнорировать
 при необходимости) любые at-правила, свойства, значения свойств, ключевые слова,
 и другие синтаксические конструкции, для которых они не имеют применимого уровня
 служба поддержки.В частности, пользовательские агенты  не должны  выборочно
 игнорировать неподдерживаемые значения компонентов и учитывать поддерживаемые значения в одном
 объявление многозначного свойства: если какое-либо значение считается недействительным
 (так как должны быть неподдерживаемые значения), CSS требует, чтобы все объявление
 быть проигнорировано.
 Реализации нестабильных и проприетарных функций 
 Во избежание конфликтов с будущими стабильными функциями CSS,
 CSSWG рекомендует следовать рекомендациям по реализации нестабильных функций и проприетарных расширений CSS.
 Неэкспериментальные реализации 
 Как только спецификация достигает стадии кандидата в рекомендации,
 возможны неэкспериментальные реализации, и разработчики должны
 выпустить реализацию без префикса любой функции уровня CR, которую они
 может продемонстрировать правильность реализации в соответствии со спецификацией.
 Для установления и поддержания функциональной совместимости CSS в
 реализации, Рабочая группа CSS просит, чтобы неэкспериментальные
 Визуализаторы CSS представляют отчет о внедрении (и, при необходимости,
 тестовых наборов, использованных для этого отчета о реализации) в W3C до
 выпуск реализации без префикса любых функций CSS.Тестовые случаи
 отправленные в W3C, подлежат рассмотрению и исправлению со стороны CSS
 Рабочая группа.
 Дополнительная информация о представлении тестовых примеров и отчетов о реализации
 можно найти на веб-сайте Рабочей группы CSS по адресу https://www.w3.org/Style/CSS/Test/. Вопросы следует направлять в список рассылки [email protected].
 Критерии выхода CR 
 Чтобы эта спецификация была улучшена до предлагаемой рекомендации,
 должны быть как минимум две независимые, взаимодействующие реализации
 каждой функции.Каждая функция может быть реализована различным набором
 продукты, нет требования, чтобы все функции были реализованы
 единый продукт. Для целей этого критерия мы определяем
 следующие термины:
 независимый
 каждая реализация должна быть разработана
 другая сторона и не может делиться, повторно использовать или извлекать из кода
 используется другой подходящей реализацией. Участки кода, которые
 не имеют отношения к реализации этой спецификации.
 освобождены от этого требования.
 интероперабельный
 прохождение соответствующего теста(ов) в
 официальный набор тестов CSS, или, если реализация не является веб-сайтом
 браузер, эквивалентный тест. Каждый соответствующий тест в тесте
 набор должен иметь эквивалентный тест, созданный, если такой пользователь
 агент (UA) должен использоваться для утверждения интероперабельности. Кроме того
 если такой UA должен использоваться для заявления о функциональной совместимости, то существует
 должен быть один или несколько дополнительных UA, которые также могут передавать эти
 эквивалентные испытания таким же образом с целью
 совместимость.Эквивалентные тесты должны быть сделаны публично
 доступны для целей рецензирования.
 реализация
 пользовательский агент, который: реализует спецификацию.
 доступен для широкой публики. Реализация может
 быть поставляемым продуктом или другой общедоступной версией
 (например, бета-версия, предварительный выпуск или «ночная сборка»).
 Релизы продукта, не предназначенные для доставки, должны быть реализованы
 функции в течение как минимум одного месяца, чтобы
 демонстрировать стабильность.
 не является экспериментальным (т. е. версией, специально разработанной
 для прохождения набора тестов и не предназначен для обычного использования
 идти вперед).
 Спецификация будет оставаться кандидатом в рекомендации не менее
 шесть месяцев.
 Индекс 
 Термины, определенные данной спецификацией 
 https://www.w3.org/TR/css-cascade-5/#cascade-origin-user  Ссылка на:  https://www.w3.org/TR/css-color-4/#typedef-color  Ссылка на:  https://www.w3.org/TR/css-color-adjust-1/#propdef-color-scheme  Ссылка на:  https://www.w3.org/TR/css-overflow-3/#propdef-overflow  Ссылка на:  https://www.w3.org/TR/css-overflow-3/#overlay-scrollbars  Ссылка на:  https://www.w3.org/TR/css-overflow-3/#scroll-container  Ссылка на:  https://www.w3.org/TR/css-values-4/#css-wide-keywords  Ссылка на:  https://www.w3.org/TR/css-values-4/#mult-num  Ссылка на:  https://www. w3.org/TR/css-values-4/#comb-one  Ссылка на:  https://html.spec.whatwg.org/multipage/sections.html#the-body-element  Ссылка на:  Термины, определенные ссылкой 
 Ссылки 
 Нормативные ссылки 
 [CSS-ЦВЕТ-4]
 Таб Аткинс младший; Крис Лилли.  Модуль цвета CSS, уровень 4  . 1 июня 2021 г.ВД. URL: https://www.w3.org/TR/css-color-4/
 [CSS-COLOR-ADJUST-1]
 Элика Этемад; и другие.  Модуль настройки цвета CSS, уровень 1  . 16 июня 2021 г. WD. URL: https://www.w3.org/TR/css-color-adjust-1/
 [CSS-ПЕРЕПОЛНЕНИЕ-3]
 Дэвид Барон; Элика Этемад; Флориан Ривоаль.  Модуль переполнения CSS, уровень 3  . 2 декабря 2021 г. WD. URL: https://www.w3.org/TR/css-overflow-3/
 [CSS-ЗНАЧЕНИЯ-3]
 Таб Аткинс мл.; Элика Этемад.  Модуль значений и единиц CSS, уровень 3  . 6 июня 2019 г. ЧР. URL: https://www. w3.org/TR/css-values-3/
 [CSS-ЗНАЧЕНИЯ-4]
 Таб Аткинс младший; Элика Этемад.  Модуль значений и единиц CSS, уровень 4  . 16 октября 2021 г. ВД. URL-адрес: https://www.w3.org/TR/css-values-4/
 [CSS2]
 Берт Бос; и другие.  Каскадные таблицы стилей, уровень 2, редакция 1 (CSS 2.1), спецификация  . 7 июня 2011 г. РЭК. URL-адрес: https://www.w3.org/TR/CSS21/
 [RFC2119]
 С. Браднер.  Ключевые слова для использования в RFC для обозначения уровней требований  . Март 1997 г. Передовая современная практика. URL-адрес: https://datatracker.ietf.org/doc/html/rfc2119.
 Информативные ссылки 
 [CSS-КАСКАД-5]
 Элика Этемад; Мириам Сюзанна; Tab Atkins Jr..  CSS Cascading and Inheritance Level 5  . 15 октября 2021 г. WD. URL: https://www.w3.org/TR/css-cascade-5/
 [HTML]
 Энн ван Кестерен; и другие.  Стандарт HTML  . Уровень жизни. URL: https://html.spec.whatwg.org/multipage/
 [ВКАГ21]
 Эндрю Киркпатрик; и другие.  Рекомендации по обеспечению доступности веб-контента (WCAG) 2.1  . 5 июня 2018 г. РЭК. URL: https://www.w3.org/TR/WCAG21/
 Индекс собственности 
 Имя  Значение  Исходный  Применяется к  Инга.  %возраст  Тип анимации  Канонический порядок  Расчетное значение
 цвет полосы прокрутки  авто | <цвет>{2}  авто  спиральные контейнеры  да  н/д  по вычисляемому значению  на грамматику  указанное ключевое слово или два вычисляемых цвета
 ширина полосы прокрутки  авто | тонкий | никто  авто  спиральные контейнеры  нет  н/д  по вычисляемому значению  на грамматику  указанное ключевое слово
  #propdef-scrollbar-color   Ссылка на:   #valdef-scrollbar-color-auto   Ссылка на:   #propdef-scrollbar-width   Ссылка на:   #valdef-scrollbar-width-auto   Ссылка на:   #valdef-scrollbar-width-thin   Ссылка на:   #valdef-scrollbar-width-none   Ссылка на:   ↑ 
 Стилизация полос прокрутки с помощью CSS Tutorial [2022] 
 Вчера мы уже рассмотрели  полос прокрутки  и узнали, как скрыть их для определенных областей на веб-странице.
 Сегодня мы узнаем  , как стилизовать полосы прокрутки с помощью CSS  .
 Стилизованные полосы прокрутки встречаются довольно редко. Я их пока только на паре сайтов видел.
 Несколько примеров веб-сайтов, использующих настраиваемые полосы прокрутки:
 Довольно странно, что мы не видим больше настраиваемых полос прокрутки. Они действительно могут помочь улучшить ваш дизайн.
 Стиль полосы прокрутки всегда был очень сложным. Тем не менее, мы получили несколько недавних дополнений CSS, которые дают нам такие свойства, как  scrollbar-color  и  scrollbar-width  для изменения цвета   и ширины  .
 Давайте посмотрим, как обеспечить наилучшую поддержку браузером стилизованной полосы прокрутки.
 Важно использовать как стили WebKit, так и новые стили полосы прокрутки, например:
  :root { 
 --scrollbarWidth: 12px; 
 --scrollbarBg: rgb(99, 102, 241); 
 --scrollbarThumb: rgb(244, 63, 94); 
 } 
 . container { 
 ширина полосы прокрутки: var(--scrollbarWidth); 
 цвет полосы прокрутки: var(--scrollbarThumb) var(--scrollbarBg); 
 } 
 .container::-webkit-scrollbar { 
 ширина: var(--scrollbarWidth); 
 } 
 .container::-webkit-scrollbar-track { 
 background: var(--scrollbarBg); 
 } 
 .container::-webkit-scrollbar-thumb { 
 background-color: var(--scrollbarThumb); 
 радиус границы: 6px; 
 граница: 3px сплошная var(--scrollbarBg); 
 }  
 Хорошо, давайте пройдемся по свойствам CSS и посмотрим, что происходит для каждого из них.
 Начнем с определения некоторых переменных CSS, чтобы можно было повторно использовать одни и те же стили:
  :root { 
 --scrollbarWidth: 12px; 
 --scrollbarBg: rgb(99, 102, 241); 
 --scrollbarThumb: rgb(244, 63, 94); 
 }  
 Если вы хотите узнать больше об этом, я написал более подробную статью о переменных CSS.
 Следующий элемент — новые свойства CSS полосы прокрутки:
  . container { 
 ширина полосы прокрутки: var(--scrollbarWidth); 
 цвет полосы прокрутки: var(--scrollbarThumb) var(--scrollbarBg); 
 }  
 Это новинка, и пока я обнаружил, что ее поддерживает только Chrome. Вам даже нужно включить некоторые настройки для него:
 MAC: Настройки > Общие > Показать полосы прокрутки > Всегда
 Firefox: about:config > layout.css.scrollbar-color.enabled > true
 Значения, которые вы см. для цвета полосы прокрутки:
 Примечание. Он поддерживает другие цвета, например:  цвет полосы прокрутки: темный|светлый  , но пока ни один браузер не поддерживает это.
 Здесь вступают в действие наши резервные префиксы Webkit:
  .container::-webkit-scrollbar { 
 width: var(--scrollbarWidth); 
 } 
 .container::-webkit-scrollbar-track { 
 background: var(--scrollbarBg); 
 } 
 .container::-webkit-scrollbar-thumb { 
 background-color: var(--scrollbarThumb); 
 радиус границы: 6px; 
 граница: 3px сплошная var(--scrollbarBg); 
 }  
 Префиксы обеспечат отображение пользовательской полосы прокрутки во всех других современных браузерах. Здесь мы также можем использовать основной префикс CSS для определения ширины полосы прокрутки.
 Затем мы можем стилизовать дорожку, которая действует как цвет фона полосы прокрутки   .
 Наконец, у нас есть возможность стилизовать большой палец   . Это настоящий скользящий бит. В моем примере я использую border-radius и border, чтобы немного сместить его по бокам.
 Вот и все, теперь вы узнали, как создать пользовательскую полосу прокрутки с помощью CSS!
 См. примеры CSS в этой постоянной ссылке Codepen 
 Посмотрите демонстрацию, которую я сделал на Codepen:
 См. полосы прокрутки Pen Styling с CSS от Криса Бонгерса (@rebelchris) на CodePen.
 К сожалению, цвет полосы прокрутки и ширина полосы прокрутки не поддерживаются должным образом.
 Однако префикс WebKit поддерживается более широко. Вы можете видеть, что их комбинация может поддерживать довольно много браузеров.
 Спасибо за чтение, и давайте подключаться! постоянная ссылка 
 Спасибо, что читаете мой блог. Не стесняйтесь подписаться на мою рассылку по электронной почте и подключиться к Facebook или Twitter
 Цвет полосы прокрутки - CSS - W3cubDocs 
 Свойство CSS  scrollbar-color  устанавливает цвет дорожки полосы прокрутки и бегунка.
 Трек   относится к фону полосы прокрутки, который обычно фиксируется независимо от положения прокрутки.
 Ползунок   относится к движущейся части полосы прокрутки, которая обычно плавает над дорожкой.
 Синтаксис 
цвет полосы прокрутки: авто;


цвет полосы прокрутки: пурпурно-зеленый;


цвет полосы прокрутки: наследовать;
цвет полосы прокрутки: начальный;
цвет полосы прокрутки: вернуться;
цвет полосы прокрутки: не установлен;
 
 Значения 
   
 Определяет цвет полосы прокрутки.
  auto  Рендеринг платформы по умолчанию для части дорожки полосы прокрутки при отсутствии каких-либо других связанных свойств цвета полосы прокрутки.
     Применяет первый цвет к бегунку полосы прокрутки, второй — к дорожке полосы прокрутки.
  Примечание. Пользовательские агенты  должны применять любое значение  цвета полосы прокрутки , установленное в корневом элементе, к области просмотра.
 Вопросы доступности 
 При использовании свойства  scrollbar-color  с определенными значениями цвета авторы должны убедиться, что указанные цвета имеют достаточный контраст между собой. Для значений ключевых слов UA должны убедиться, что используемые ими цвета имеют достаточную контрастность. См. Методы для WCAG 2.0: G183: Использование коэффициента контрастности 3:1.
 Формальное определение 
 Формальный синтаксис 
 авто | {2} , где 
  =  |  |  |  | <шестнадцатеричный цвет> | <названный цвет> | текущий цвет |  
 , где 
  = rgb({3} [/]?) | rgb(<число>{3} [/<альфа-значение>]?) | rgb(<процент>#{3}, <альфа-значение>?) | rgb(<число>#{3}, <альфа-значение>?) 
  = rgba(<процент>{3} [/<альфа-значение>]?) | rgba(<число>{3} [/<альфа-значение>]?) | rgba(<процент>#{3}, <альфа-значение>?) | rgba(<число>#{3}, <альфа-значение>?) 
  = hsl(<оттенок> <процент> <процент> [/<альфа-значение>]?) | hsl( <оттенок>, <процент>, <процент>, <альфа-значение>?) 
  = hsla( <оттенок> <процент> <процент> [ / <альфа-значение> ]? ) | hsla( <оттенок>, <процент>, <процент>, <альфа-значение>? ) 
  где 
 <альфа-значение> = <число> | <процент> 
 <оттенок> = <число> | <угол> 
 
 Примеры 
 Окрашивание переполненных полос прокрутки 
 УСБ 
 . скроллер {
  ширина: 300 пикселей;
  высота: 100 пикселей;
  переполнение-у: прокрутка;
  цвет полосы прокрутки: пурпурно-зеленый;
}
 
 HTML 
 Veggies es Bonus Vobis, proinde vos postulo essum magis кольраби валлийский лук дайкон амарант татсой томатильо дыня фасоль азуки чеснок. Зелень свеклы гамбо, кукуруза, соко, эндивий, тыква гамбо. Петрушка лук-шалот кабачки тацой ростки гороха фасоль фасоль листовая зелень одуванчик бамия вакамэ помидоры. Одуванчик, огурец, земляной орех, горох, арахис, соко, цукини.
 
 Результат 
 Технические характеристики 
 Совместимость с браузером 
 Рабочий стол  Мобильный
 Хром  Край  Firefox  Internet Explorer  Опера  Сафари  Веб-просмотр Android  Хром Android  Firefox для Android  Опера Android  Сафари на IOS  Самсунг Интернет
  цвет полосы прокрутки  №  №  64
 В macOS необходимо установить для параметра  Общие  >  Показать полосы прокрутки  в Системных настройках значение «Всегда», чтобы это свойство имело какой-либо эффект.  №  №  №  №  №  64  №  №  №
 См. также 
 Стилизация полос прокрутки с помощью CSS во всех современных браузерах 
 Свойство CSS  полосы прокрутки  не является стандартным. Chrome, Safari и Microsoft Edge используют механизм WebKit с псевдоэлементом префикса  -webkit-scrollbar  для стилизации полос прокрутки.Firefox также позволяет изменять стиль с помощью нескольких параметров, включая ширину и цвет полосы прокрутки.
 Ниже мы поговорим о том, как создавать собственные полосы прокрутки CSS для вашего сайта, используя правила для браузеров WebKit, а именно Google Chrome и Microsoft Edge.
 Что такое полоса прокрутки? 
 Большинство современных веб-сайтов содержат больше содержимого, чем может поместиться в клиентской области окна браузера.
 Полоса прокрутки — это графический инструмент, который позволяет пользователям полностью перемещаться по содержимому веб-страницы.
 Существует два типа полос прокрутки:
  Вертикальные полосы прокрутки  : используется для навигации вверх и вниз по веб-странице. Это наиболее распространенный тип полосы прокрутки, используемый на веб-страницах.
  Горизонтальные полосы прокрутки  : используются для навигации влево и вправо на веб-странице. Не очень распространено, если только ваши страницы не перемещаются вбок, а не вверх и вниз. Во многих случаях это может сбивать с толку и плохо работает для адаптивного дизайна и взаимодействия с мобильными пользователями.
 Полосами прокрутки можно управлять, щелкая и перетаскивая курсор мыши, вращая колесо мыши или используя стрелки вверх и вниз на клавиатуре.
 Полосы прокрутки не ограничены только клиентской областью браузера. Таблицы, элементы div и другие HTML-элементы также могут содержать полосы прокрутки для навигации по их областям содержимого!
 Стилизация полос прокрутки с помощью CSS 
 Этого можно добиться с помощью набора псевдоэлементов. Существует множество комбинаций псевдоэлементов, селекторов и свойств, которые вы можете определить, чтобы настроить их по своему усмотрению.
 Самое приятное то, что это очень просто, когда вы освоите все различные части, из которых состоит полоса прокрутки, и вам не нужно будет создавать дополнительный HTML-код, содержащий элементы полосы прокрутки, чтобы эти правила CSS работали, поскольку они на самом деле часть окна браузера, а не веб-страницы.
 Полосы прокрутки отображаются в соответствии с установленными для них свойствами CSS. По умолчанию браузер отображает контейнер полосы прокрутки в правой части окна браузера и будет отключен, если содержимое не выходит за пределы экрана.
 Вот графическое представление анатомии полосы прокрутки:
 Теперь давайте углубимся в каждый из псевдоэлементов и их возможности настройки. Как упоминалось ранее, это будет работать для браузеров Google Chrome и Microsoft Edge. Это также будет работать в настольных браузерах Safari с префиксом  -webkit . Мы обсудим Firefox немного позже.
 В приведенных ниже примерах кода будут использоваться те же правила CSS, что и на изображении выше, чтобы вы могли получить четкое представление о том, как псевдоэлементы и свойства CSS связаны друг с другом визуально и записываются.
 Стилизация полос прокрутки с помощью 
 ::-webkit-scrollbar  Весь контейнер полосы прокрутки. Здесь вы можете определить ширину контейнера вертикальной полосы прокрутки и высоту контейнера горизонтальной полосы прокрутки. Вы можете определить оба размера в одном определении:
 ::-webkit-scrollbar { 
 width: 24px; 
 высота: 24px; 
 } 
 Стилизация кнопок полосы прокрутки с помощью 
 ::-webkit-scrollbar-button  Кнопки полосы прокрутки. Кнопки полосы прокрутки не отображаются по умолчанию во всех современных браузерах, но вы можете добавить их для дополнительного управления навигацией.Пользователь может щелкнуть одну из этих кнопок, чтобы переместиться на небольшое количество пикселей вверх или вниз по экрану.
 Кнопки были функцией, которая широко использовалась в старые времена просмотра Интернета. В настоящее время прокрутку легче выполнить с помощью колеса прокрутки мыши, но эта опция по-прежнему доступна для веб-сайтов, которые хотят отображать дополнительные элементы управления.
 Вы можете настроить кнопки для отображения одной кнопки вверх и вниз на полосе прокрутки: кнопка вверх над бегунком полосы прокрутки и кнопка вниз под ним:
 ::-webkit-scrollbar-button:single-button { 
 /* стиль одной кнопки */ 
 } 
 Или вы можете настроить так, чтобы кнопки вверх и вниз были сгруппированы вместе, один раз над полосой прокрутки и один раз под ней:
 ::-webkit-scrollbar-button:double- button { 
 /* стиль двойной кнопки */ 
 } 
 Кроме того, вы можете добавить стрелки к кнопкам полосы прокрутки, чтобы пользователи знали, как перемещаться по вашему контенту.В приведенном ниже фрагменте кода показан пример прокрутки с помощью кнопок вверх и вниз на вертикальной полосе прокрутки с использованием простых определений CSS:
 ::-webkit-scrollbar-button:single-button:vertical:decrement { 
 border-color : прозрачный прозрачный #9b6a2f прозрачный; 
 }  ::-webkit-scrollbar-button:single-button:vertical:decrement:hover { 
 border-color: прозрачный прозрачный белый прозрачный; 
 } 
  ::-webkit-scrollbar-button:single-button:vertical:increment { 
 цвет границы: #9b6a2f прозрачный прозрачный прозрачный; 
 } 
  ::-webkit-scrollbar-button:single-button:vertical:increment:hover { 
 border-color: белый прозрачный прозрачный прозрачный; 
 } 
 
 Каждое из значений свойства  border-color  представляет сторону кнопки, на которой вы хотите отобразить другой цвет. Квадратные кнопки будут отображать треугольную стрелку, если вы укажете цвет с одной стороны, как в приведенном выше примере кода.
 Стилизация полос прокрутки с помощью 
 ::-webkit-scrollbar-thumb  Перетаскиваемая ручка прокрутки. Если щелкнуть и удерживать этот маркер курсором мыши, можно перетаскивать ползунок полосы прокрутки вверх и вниз на вертикальной полосе прокрутки или влево и вправо на горизонтальной полосе прокрутки, и страница будет прокручиваться вместе с движением мыши. Если отпустить кнопку мыши, анимация прокрутки остановится.
 ::-webkit-scrollbar-thumb { 
 граница: 6px сплошная #9b6a2f; 
 фон: #e89a3e; 
 радиус границы: 12px 12px 12px 12px; поле 
: 0px авто; 
 } 
 Стилизация дорожек полосы прокрутки с помощью 
 ::-webkit-scrollbar-track  Дорожка полосы прокрутки. Это действует как индикатор выполнения, показывающий, насколько далеко вниз или поперек веб-страницы вы находитесь.
 В этой части полосы прокрутки мы просто установим цвет фона, чтобы мы могли отличить фактически перетаскиваемый узел полосы прокрутки от его фоновой дорожки:
 ::-webkit-scrollbar-track { 
 background: #9b6a2f; 
 } 
 Стилизация фрагментов дорожки полосы прокрутки с помощью 
 ::-webkit-scrollbar-track-piece  Часть дорожки, которая является , а не , закрыта большим пальцем. Обычно я устанавливаю для этого тот же цвет, что и веб-страница, как показано во фрагменте кода ниже. Но вы создаете свой сайт, так что поиграйте с этим и сделайте то, что лучше всего подходит для эстетики вашего дизайна.
 ::-webkit-scrollbar-track-piece { 
 background: #9b6a2f; 
 } 
 Стилизация углов полосы прокрутки с помощью 
 ::-webkit-scrollbar-corner  Правый нижний угол полосы прокрутки, где пересекаются вертикальная и горизонтальная полосы прокрутки.
 Поскольку я обычно не разрешаю горизонтальную навигацию ни на одном из своих веб-сайтов (я просто считаю, что это недопустимо при проектировании), я обычно скрываю это от просмотра.Но вы также можете установить любой цвет фона:
 ::-webkit-scrollbar-corner { 
 background: #9b6a2f; 
 } 
 Псевдоэлемент Resizer: 
 ::-webkit-resizer  Перетаскиваемый маркер изменения размера, который появляется в правом нижнем углу некоторых элементов, например  textarea  элементов. Стиль для этого работает аналогично псевдоэлементу  ::-webkit-scrollbar-corner , поэтому тот же пример выше должен работать и здесь.
 Селекторы псевдоклассов полосы прокрутки 
 Вы можете углубиться в каждое из правил псевдоэлементов, добавив дополнительные селекторы псевдоклассов. Мы использовали некоторые из них в приведенных выше примерах, поэтому давайте разберем каждый из доступных вариантов:
  :horizontal  — правила CSS, определенные в этом псевдоклассе, будут применяться к любым функциям полосы прокрутки, которые содержат горизонтальную ориентацию.
  :vertical  — правила CSS, определенные в этом селекторе, будут применяться к любым функциям полосы прокрутки, имеющим вертикальную ориентацию.
  :decrement  — этот псевдокласс применяется к кнопкам полосы прокрутки и элементам трека и указывает, будет ли уменьшаться позиция представления (вверх на вертикальной полосе прокрутки и влево на горизонтальной полосе прокрутки).
  :increment  — этот псевдокласс применяется к кнопкам полосы прокрутки и элементам трека и указывает, будет ли увеличиваться позиция представления (вниз на вертикальной полосе прокрутки и вправо на горизонтальной полосе прокрутки).
  :start  — этот псевдокласс применяется к кнопкам полосы прокрутки и элементам трека и указывает, будут ли объекты размещаться перед бегунком полосы прокрутки.
  :end  — этот псевдокласс применяется к кнопкам полосы прокрутки и элементам трека и указывает, будут ли объекты размещаться после бегунка полосы прокрутки.
  :single-button  — этот псевдокласс применяется к кнопкам полосы прокрутки и фрагментам дорожек и указывает, будет ли одна кнопка отображаться над и под полосой прокрутки. Кнопки вверх и вниз для вертикальных полос прокрутки и кнопки влево и вправо для горизонтальных полос прокрутки.
  :double-button  — Этот псевдокласс применяется к кнопкам полосы прокрутки и элементам дорожки и указывает, будет ли группа кнопок отображаться над и под дорожкой полосы прокрутки. Кнопки вверх и вниз для вертикальных полос прокрутки и кнопки влево и вправо для горизонтальных полос прокрутки.
  :no-button  — этот псевдокласс применяется только к частям дорожки полосы прокрутки и указывает, будут ли кнопки отображаться выше, ниже или рядом с дорожкой полосы прокрутки, в зависимости от ориентации полосы прокрутки.
  :corner-present  — Этот псевдокласс указывает, будет ли присутствовать угол полосы прокрутки.
 Стилизация полос прокрутки в Firefox 
 В Firefox нет расширенных методов стилизации, таких как браузеры Google Chrome или Microsoft Edge.Однако вы по-прежнему можете настраивать ширину полосы прокрутки, а также цвет бегунка и дорожки.
  ширина полосы прокрутки  : Устанавливает ширину полосы прокрутки. Хранилище по умолчанию —  auto  . Вы также можете установить для этого параметра значение  thin  для более тонкой (почти невидимой) полосы прокрутки.
  цвет полосы прокрутки  : Здесь вы устанавливаете два шестнадцатеричных значения цвета. Первое значение — это цвет бегунка полосы прокрутки, а второе значение — цвет дорожки полосы прокрутки.
 Вот пример, показывающий два свойства в действии.
 html { 
 ширина полосы прокрутки: авто; 
 цвет полосы прокрутки: #15171d #0d0f13; 
 } 
 Обратите внимание, что свойства заключены в селектор элемента  html . Это стандартный стиль полосы прокрутки Firefox. Если вы хотите стилизовать определенные элементы с горизонтальным или вертикальным переполнением, вы можете сделать это, изменив селектор элементов по своему вкусу.
 Скрытие полос прокрутки с помощью CSS 
 Вы также можете скрыть окно браузера или полосы прокрутки дочернего контейнера с помощью одного из следующих правил CSS:
 overflow-x: hidden; 
 overflow-y: hidden;
 
  overflow-x  скрывает горизонтальную полосу прокрутки, а  overflow-y  скрывает вертикальную полосу прокрутки.
 Чтобы скрыть как вертикальные, так и горизонтальные полосы прокрутки в контейнере с помощью всего одной строки кода, вы можете использовать свойство  overflow :
 overflow: hidden; 
 Заключение 
 В этом примере вы узнали, как стилизовать полосы прокрутки с помощью CSS, используя различные примеры, разбитые на каждую часть элемента полосы прокрутки.
 Экспериментируйте и получайте удовольствие! Существует множество различных методов стилизации, которые вы можете использовать для полос прокрутки с помощью CSS, и игра с различными псевдоклассами, селекторами, свойствами требует совершенно нового уровня удовольствия от CSS.
 Браузеры, полосы прокрутки и стили — взаимно человеческий 
 На компьютере на моем столе было три браузера для просмотра реализации. Мы рассмотрели реализацию в первом браузере.
 «Этот браузер не выравнивает наши флажки между заголовком и списком!», — сказали мы.
 Итак, мы просмотрели реализацию во втором браузере.
 «Этот браузер также не выравнивает наши флажки!», — воскликнули мы.
 Итак, мы просмотрели реализацию в последнем браузере.
 «Аааа, этот браузер выглядит в самый раз», — радостно сказали мы.
 Ладно, хватит адаптации Златовласки. Что, черт возьми, происходит и почему?
 Браузеры и полосы прокрутки 
 Полоса прокрутки кажется забытой частью реализации браузера, которая должна быть представлена через CSS.
 Невозможно указать размер полосы прокрутки браузера через CSS. Как вы можете видеть на скриншотах выше, каждый браузер делает что-то свое.
 Мы могли бы наивно пытаться всегда включать полосы прокрутки, но тогда проблема заключается в том, что ширина полосы прокрутки различна для разных платформ и браузеров. И у нас все еще были бы расхождения.
 OSX имеет ширину 0 (или, если у вас подключено устройство ввода, малую ширину). Firefox пытается реализовать что-то свое, используя нативные стили (что делает его тонким в OSX и шире в Windows), а IE9 идет еще немного шире. Это очень раздражает при реализации дизайна, подобного приведенному выше.
 Нужно ли нам прибегать к реализации хаков для конкретных браузеров или реализовывать собственные настраиваемые полосы прокрутки в разных браузерах?
 Черт возьми, нет!
 Ну вроде как. Нам нужно реализовать кросс-браузерный обходной путь. Прежде чем мы рассмотрим исправление, вот исходная разметка, которая приводит к описанному выше поведению.
 Источник 
 Немного разметки и немного стилей. Вы можете увидеть это вживую в этом jsfiddle: http://jsfiddle.net/zdennis/QsCDm/
 Давайте приступим к решению проблемы в кроссбраузерном режиме.
 Решение 
 Во-первых, мы решили, что у нас в контейнере списка всегда будут отображаться вертикальные полосы прокрутки (но никогда не горизонтальные полосы прокрутки, поскольку они нам не нужны):
 Далее нам нужно было найти способ добавить вертикальные полосы прокрутки в заголовок. Если бы мы могли добиться этого, то эти полосы прокрутки могли бы сдвигать флажок заголовка справа достаточно, чтобы выровнять их со списком.
 Для этого мы добавили два контейнера в элемент заголовка  :
  .Scroll_holder  будет использоваться для размещения полосы прокрутки, а  .actions_holder  будет использоваться для размещения нашего исходного флажка заголовка. Оба этих контейнера должны быть размещены правильно:
 Теперь первый контейнер  .scroll_holder  должен содержать полосу прокрутки. Именно эта полоса прокрутки сдвинет флажок заголовка справа достаточно, чтобы добиться выравнивания с флажками списка. Однако мы не хотим, чтобы полоса прокрутки была видна пользователю. Давайте представим контейнер для размещения скроллера внутри .scroll_holder  :
 Добавление стилей для .  скроллер  даст нам полосу прокрутки, а затем мы сможем обновить стили для .  scroll_holder  чтобы скрыть от пользователя:
 Мы использовали  visible hidden , потому что это позволит нашему скроллеру занимать место в макете, не будучи видимым для пользователя. Мы также ввели высоту в нашем .  scroller , поэтому IE9 действительно будет отображать полосы прокрутки. Иначе не будет, потому что нет контента.
 Если вы обновитесь в этот момент, это все равно будет выглядеть неправильно.Там есть стиль из первоисточника, который нужно удалить. Это стиль, который сделал флажок заголовка абсолютно позиционированным:
 Теперь обновите!
 Мы приближаемся. Последний стиль, который нужно добавить, — убедиться, что элементы списка  li  расположены относительно друг друга. Это исправит последний бит позиционирования:
. И вуаля!
 Флажок заголовка теперь выровнен с флажками в списке ниже:
 И окончательный обновленный исходник:
 Вы можете увидеть это вживую в этом jsfiddle: http://jsfiddle.net/zdennis/pBGzq/
 Резюме 
 Полагаясь только на хорошо поддерживаемый CSS и немного дополнительной разметки, решение является кросс-браузерным. Из-за его дружественного характера мы обнаружили, что это хороший способ поддерживать совместимость, не прибегая к специфичным для браузера CSS, Javascript или хакам.
 На момент написания этой статьи решение работало в Chrome, Safari, Firefox, IE и Opera. Это может работать в других, но я не проверял, кроме перечисленных.
 На самом деле есть еще один способ решить эту проблему, используя многообещающую гибкую блочную модель, но IE и Opera в настоящее время не поддерживают ее в своих последних браузерах.IE, скорее всего, будет иметь некоторую поддержку в IE10, но Opera остается стабильной до тех пор, пока спецификация гибкой блочной модели не установится и не стабилизируется. 
  При создании этого поста не пострадал ни один медвежонок или златовласая девчонка. Однако каша могла быть съедена. 
 Стилизация полос прокрутки | Вебкит 
 WebKit теперь поддерживает стилизацию полос прокрутки в дополнительных разделах, списках, раскрывающихся меню и текстовых областях. Для тех, кто хочет пропустить статью и сразу перейти к первоисточнику, вот пример.
 Вот снимок экрана для тех, у кого недостаточно свежий WebKit:
 
 Псевдоэлемент полосы прокрутки указывает, что объект должен использовать пользовательскую полосу прокрутки. Когда этот псевдоэлемент присутствует, WebKit отключит встроенную визуализацию полосы прокрутки и просто будет использовать информацию, предоставленную в CSS.
  ::-вебкит-полоса прокрутки {
    ширина: 13 пикселей;
    высота: 13 пикселей;
}
  
 Свойства ширины и высоты элемента полосы прокрутки указывают ширину вертикальной полосы прокрутки и высоту горизонтальной полосы прокрутки.Для этих значений также можно указать проценты, и в этом случае полоса прокрутки будет занимать этот процент области просмотра.
 Полоса прокрутки состоит из кнопок полосы прокрутки и дорожки. Сама дорожка далее подразделяется на части дорожки и большой палец. Части дорожки представляют области выше и ниже большого пальца.
 Кроме того, теперь можно стилизовать угол полосы прокрутки, а также изменять размер текстовых областей с изменяемым размером.
 Вот полный список всех новых псевдоэлементов.Все эти псевдоэлементы должны иметь префикс -webkit-.
  полоса прокрутки
кнопка полосы прокрутки
полоса прокрутки
часть полосы прокрутки
полоса прокрутки
угол полосы прокрутки
изменить размер
  
 Каждый из этих объектов может быть дополнен рамками, тенями, фоновыми изображениями и т. д. для создания полностью настраиваемых полос прокрутки, которые по-прежнему будут учитывать настройки операционной системы в отношении размещения кнопок и поведения при нажатии.
 Добавлены следующие псевдоклассы, которые можно применять к псевдоэлементам.
  :horizontal  — Горизонтальный псевдокласс применяется ко всем частям полосы прокрутки, которые имеют горизонтальную ориентацию.
  :vertical  — вертикальный псевдокласс применяется ко всем частям полосы прокрутки, имеющим вертикальную ориентацию.
  :decrement  — Псевдокласс уменьшения применяется к кнопкам и дорожкам. Он указывает, будет ли кнопка или фрагмент дорожки уменьшать позицию представления при использовании (например, вверх на вертикальной полосе прокрутки, влево на горизонтальной полосе прокрутки).
  :increment  — Псевдокласс увеличения применяется к кнопкам и дорожкам. Он указывает, будет ли кнопка или часть дорожки увеличивать положение представления при использовании (например, вниз на вертикальной полосе прокрутки, вправо на горизонтальной полосе прокрутки).
  :start  — Псевдокласс start применяется к кнопкам и трекам. Он указывает, находится ли объект перед большим пальцем.
  :end  — Псевдокласс end применяется к кнопкам и дорожкам.Указывает, находится ли объект после большого пальца.
  :double-button  — Псевдокласс double-button применяется к кнопкам и дорожкам. Он используется для определения того, является ли кнопка частью пары кнопок, находящихся вместе на одном конце полосы прокрутки. Для частей дорожки это указывает, упирается ли часть дорожки в пару кнопок.
  :single-button  — Псевдокласс single-button применяется к кнопкам и дорожкам. Он используется для определения того, находится ли кнопка сама по себе в конце полосы прокрутки. Для частей дорожки это указывает, упирается ли часть дорожки в одноэлементную кнопку.
  :no-button  — применяется к участкам дорожки и указывает, доходит ли участок дорожки до края полосы прокрутки, т. е. на этом конце дорожки нет кнопки.
  :corner-present  — применяется ко всем частям полосы прокрутки и указывает, присутствует ли угол полосы прокрутки.
  :window-inactive  — применяется ко всем частям полосы прокрутки и указывает, активно ли в данный момент окно, содержащее полосу прокрутки.(В недавних ночных выпусках этот псевдокласс теперь применяется и к ::selection. Мы планируем расширить его для работы с любым содержимым и предложить в качестве нового стандартного псевдокласса.)
 Кроме того, псевдоклассы :enabled, :disabled, :hover и :active также работают с частями полосы прокрутки.
 Свойство display может быть установлено равным none, чтобы скрыть определенные фрагменты.
 Поля поддерживаются вдоль оси полосы прокрутки.
No related posts.

Имя	Значение	Исходный	Применяется к	Инга.	%возраст	Тип анимации	Канонический порядок	Расчетное значение
цвет полосы прокрутки	авто \| <цвет>{2}	авто	спиральные контейнеры	да	н/д	по вычисляемому значению	на грамматику	указанное ключевое слово или два вычисляемых цвета
ширина полосы прокрутки	авто \| тонкий \| никто	авто	спиральные контейнеры	нет	н/д	по вычисляемому значению	на грамматику	указанное ключевое слово

	Рабочий стол	Мобильный
`цвет полосы прокрутки`	№	№	64 В macOS необходимо установить для параметра Общие > Показать полосы прокрутки в Системных настройках значение «Всегда», чтобы это свойство имело какой-либо эффект.	№	№	№	№	№	64	№	№	№

`alexxlab`

Разное

`Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы`

Разное

`Как успокоить плачущего ребенка: 10 эффективных способов`

Разное

`Что нужно новорожденному на первое время: полный список необходимых вещей`

Разное

`Пеленки для новорожденных: виды, размеры и способы использования`

Разное

`Детская кроватка для новорожденного: как правильно выбрать`

Разное

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