Css полосы прокрутки: Полосы прокрутки: CSS свойство overflow, тонкости.

Содержание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: Chris Coyier

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

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

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

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

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

PSD to HTML

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

Смотреть

Полоса прокрутки. Учебник 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 потеряется, точнее станет «по умолчанию» и полоса приобретёт вот такой вид:

overflow-y | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	1.0+	9.5+	3.0+	1.5+	2.1+	2.0+

Краткая информация

Значение по умолчанию	visible
Наследуется	Нет
Применяется	К блочным элементам
Процентная запись	Неприменима
Ссылка на спецификацию	http://www.w3.org/TR/css3-box/#overflow-y

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

Синтаксис

overflow-y: auto | hidden | scroll | visible

Значения

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

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>overflow-y</title>
  <style>
   body {
    overflow-y: hidden; /* Убираем вертикальную полосу прокрутки */
   }
   .layer {
    width: 300px; /* Ширина блока */
    height: 150px; /* Высота блока */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <div>
   <h3>Duis te feugifacilisi</h3>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
    nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
    Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
    lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства overflow-y

Объектная модель

[window.]document.getElementById(«elementID»).style.overflowY

overflow-x | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	1.0+	9.5+	3.0+	1.5+	2.1+	2.0+

Краткая информация

Значение по умолчанию	visible
Наследуется	Нет
Применяется	К блочным элементам
Процентная запись	Неприменима
Ссылка на спецификацию	http://www.w3.org/TR/css3-box/#overflow-x

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

Синтаксис

overflow-x: auto | hidden | scroll | visible

Значения

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

Пример

HTML5CSS 2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>overflow-x</title>
  <style>
   .layer {
    overflow-x: scroll; /* Добавляем полосу прокрутки */
    width: 300px; /* Ширина блока */
    height: 150px; /* Высота блока */
    padding: 5px; /* Поля вокруг текста */
    border: solid 1px black; /* Параметры рамки */
    white-space: nowrap; /* Запрещаем перенос строк */
   } 
  </style>
 </head>
 <body> 
  <div>
   <h3>Duis te feugifacilisi</h3>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
    nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
    Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
    lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div> 
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства overflow-x

Объектная модель

[window.]document.getElementById(«elementID»).style.overflowX

CSS3-переполнение

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

Управление переполнением

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

IE: 10
Edge: 12
Firefox: 52, 2 -moz
Chrome: 50, 4 -webkit-
Safari: 9, 3.1 -webkit-
Opera: 37, 11.5 -webkit-
iOS Safari: 9, 3.2 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 5, 4 -webkit-

1. Типы переполнения

Существует два типа переполнения, которое используется браузерами: переполнение эффектов рисования и прокручиваемое переполнение.

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

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

2. Прокрутка и обрезка переполнения: свойства overflow-x, overflow-y и overflow

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

Свойство overflow-x определяет обработку переполнения в горизонтальном направлении (т.е. переполнение с левой и правой сторон блока), а свойство overflow-y определяет обработку переполнения в вертикальном направлении (т.е. переполнение с верхней и нижней сторон блока).

Свойства не наследуются.

overflow-x, overflow-y
Значения:
`visible`	Значение по умолчанию. Содержимое не обрезается, а отображается поверх границ блока-контейнера. Возможно перекрытие соседних блоков.
`hidden`	Содержимое блока обрезается без добавления какого-либо интерфейса прокрутки для просмотра содержимого вне области обрезки.
`scroll`	Содержимое обрезается до области полей, при этом блок становится прокручиваемым контейнером. Если браузер использует механизм прокрутки, который виден на экране, например, полосу прокрутки, этот механизм отображается независимо от того, обрезано ли какое-либо его содержимое. Это позволяет избежать проблем с появлением и исчезновением полос прокрутки в динамической среде. Размеры контейнера при этом не меняются, а полоса прокрутки вставляется между внутренним краем границы и внешним краем поля элемента.
`auto`	Браузер использует механизм прокрутки только при переполнении блока.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

overflow-x: visible;
overflow-x: hidden;
overflow-x: scroll;
overflow-y: auto;
overflow-x: inherit;
overflow-x: initial;

Свойство overflow — сокращенное свойство, которое задает значения overflow-x и overflow-y в указанном порядке. Если второе значение опущено, оно копируется из первого.

Содержимое блочных элементов может переполнять блок в случае, когда для блока явно задана высота и/или ширина. Без указания высоты блок будет растягиваться, чтобы вместить содержимое, кроме случаев, когда для блока задано позиционирование position: absolute; или position: fixed;. Текст может переполнять блок по высоте, изображения — по высоте и ширине.

overflow
Значения:
`visible`	Значение по умолчанию. Содержимое не обрезается, а отображается поверх границ блока-контейнера. Возможно перекрытие соседних блоков.
`hidden`	Содержимое блока обрезается без добавления какого-либо интерфейса прокрутки для просмотра содержимого вне области обрезки. Также предотвращает отображение фона или границ под плавающими элементами, для которых задано свойство `float: left / right;`.
`scroll`	Содержимое обрезается до области полей, при этом блок становится прокручиваемым контейнером. Если браузер использует механизм прокрутки, который виден на экране, например, полосу прокрутки, этот механизм отображается независимо от того, обрезано ли какое-либо его содержимое. Это позволяет избежать проблем с появлением и исчезновением полос прокрутки в динамической среде. Размеры контейнера при этом не меняются, а полоса прокрутки вставляется между внутренним краем границы и внешним краем поля элемента.
`auto`	Браузер использует механизм прокрутки только при переполнении блока.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: hidden scroll;
overflow: auto;
overflow: inherit;
overflow: initial;

3. Автоматическое многоточие

3.1. Многоточие при переполнении: свойство text-overflow

Свойство позволяет обрезать строчное содержимое в случае, когда оно не умещается в блок-контейнер, визуально обрезая его или отображая многоточием. Текст может переполниться, например, когда ему запрещается перенос, например, из-за white-space: nowrap или отдельное слово слишком длинное, чтобы уместиться.

Свойство работает только при задании следующих условий: должна быть определена ширина блока-контейнера, элемент должен иметь значения overflow: hidden и white-space: nowrap. Применяется только к блочным контейнерам.

Свойство не наследуется.

text-overflow
Значения:
`clip`	Значение по умолчанию. Текст обрезается в пределе области содержимого, при этом может отобразиться лишь часть символа.
`ellipsis`	Замещает текст, не уместившийся в блок, с помощью многоточия.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

text-overflow: clip;
text-overflow: ellipsis;
text-overflow: initial;
text-overflow: inherit;

По материалам CSS Overflow Module Level 3

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 или IE / Edge.

Создать пользовательскую полосу прокрутки

Браузеры Webkit, такие как Chrome, Safari и Opera, поддерживают нестандартные ::-webkit-scrollbar псевдо-элемент, который позволяет нам изменять внешний вид полосы прокрутки браузера.

В следующем примере создается тонкая полоса прокрутки (шириной 10 пикселей), которая имеет серый цвет дорожки/полосы и темно-серый (#888) маркер:

Пример

/* Ширина */
::-webkit-scrollbar {
width: 10px;
}

/* Дорожка */
::-webkit-scrollbar-track {
background: #f1f1f1;
}

/* Ручка */
::-webkit-scrollbar-thumb {
background: #888;
}

/* Ручка при наведении */
::-webkit-scrollbar-thumb:hover {
background: #555;
}

Редактор кода »

В этом примере создается полоса прокрутки с тенью окна:

Пример

/* Ширина */
::-webkit-scrollbar {
width: 20px;
}

/* Дорожка */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}

/* Ручка */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}

Редактор кода »

Селекторы полосы прокрутки

Для браузеров webkit можно использовать следующие псевдо-элементы для настройки полосы прокрутки браузера:

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

Как создать собственную полосу прокрутки

Узнайте, как создать собственную полосу прокрутки с помощью CSS.

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

Примечание: Пользовательские полосы прокрутки не поддерживаются в Firefox или Edge,
предыдущая версия 79.

Как создавать собственные полосы прокрутки

Chrome, Edge, Safari и Opera поддерживают нестандартный псевдоэлемент :: - webkit-scrollbar , который позволяет нам изменять внешний вид полосы прокрутки браузера.

В следующем примере создается тонкая (шириной 10 пикселей) полоса прокрутки, которая имеет серую дорожку / полосу.
цвет и темно-серая (# 888) ручка:

Пример

/ * ширина * /
:: — webkit-scrollbar {
width: 10px;
}

/ * Колея * /
:: — webkit-scrollbar-track {
background: # f1f1f1;
}

/ * Ручка * /
:: — webkit-scrollbar-thumb {
background: # 888;
}

/ * Обработка при наведении * /
:: — webkit-scrollbar-thumb: hover {
фон: # 555;
}

Попробуй сам »

В этом примере создается полоса прокрутки с тенью блока:

Пример

/ * ширина * /
:: — webkit-scrollbar {
width: 20px;
}

/ * Колея * /
:: — webkit-scrollbar-track {
box-shadow: вставка 0 0 5px
серый;
радиус границы: 10 пикселей;
}

/ * Ручка * /
:: — webkit-scrollbar-thumb {

фон: красный;
радиус границы: 10 пикселей;
}

Попробуй сам »

Селекторы полосы прокрутки

Для браузеров webkit вы можете использовать следующие псевдоэлементы для настройки полосы прокрутки браузера:

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

html — Как увеличить ширину полосы прокрутки с помощью CSS?

Переполнение стека

Около
Продукты
Для команд

Переполнение стека
Общественные вопросы и ответы
Переполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегами
Вакансии
Программирование и связанные с ним технические возможности карьерного роста
Талант
Нанимайте технических специалистов и создавайте свой бренд работодателя
Реклама
Обратитесь к разработчикам и технологам со всего мира
О компании

Пн	Вт	Ср	Чт	Пт	Сб	Вс
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Css полосы прокрутки: Полосы прокрутки: CSS свойство overflow, тонкости.

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

PSD to HTML

Полоса прокрутки. Учебник CSS.

overflow-y | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Объектная модель

overflow-x | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Объектная модель

CSS3-переполнение

Управление переполнением

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

1. Типы переполнения

2. Прокрутка и обрезка переполнения: свойства overflow-x, overflow-y и overflow

3. Автоматическое многоточие

3.1. Многоточие при переполнении: свойство text-overflow

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

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

Как создать пользовательскую полосу прокрутки

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

Создать пользовательскую полосу прокрутки

Пример

Пример

Селекторы полосы прокрутки

Как создать собственную полосу прокрутки

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

Как создавать собственные полосы прокрутки

Пример

Пример

Селекторы полосы прокрутки

html — Как увеличить ширину полосы прокрутки с помощью CSS?

Добавить комментарий Отменить ответ