Scroll html: Атрибут scroll | htmlbook.ru - Блог сумасшедшего сисадмина

Содержание

Поле прокрутки HTML

Поле прокрутки HTML — это поле, в котором полосы прокрутки увеличиваются, когда его содержимое слишком велико и не помещается в поле. Как вы делаете коробку? Вы создаете поле, используя обычный элемент HTML (например, элемент div ). Затем, чтобы заставить поле прокручиваться, вы применяете свойство CSS overflow к div.

Но вам не нужно беспокоиться о технических деталях, если вы этого не хотите. Вы можете просто скопировать и вставить HTML-код полосы прокрутки ниже. Конечно, вы можете изменить значения по своему усмотрению (например, размер полосы прокрутки, цвет и т. д.)

Коробки с цветными свитками
Вот пример поля прокрутки HTML с добавленным цветом. У вас есть несколько вариантов, когда дело доходит до добавления цвета в поле прокрутки. Нажмите на ссылку, чтобы добавить цвет в поля прокрутки!
К этому ползунку прокрутки HTML добавлен цвет. Вы можете добавить цвет к фону вашего окна прокрутки. Вы также можете добавить цвет полосам прокрутки.
Больше цветных прокруток →
Индивидуальные полосы прокрутки
Используйте расширения WebKit для настройки полос прокрутки. Также работает с полосами прокрутки браузера (нажмите Preview ).
<голова>Мой пример <стиль> /* Привязать полосы прокрутки к окну браузера */ тело { нижняя граница: 200%; } /* Стили блоков */ .моя коробка { граница: нет; отступ: 5px; шрифт: 24px/36px без засечек; ширина: 200 пикселей; высота: 200 пикселей; переполнение: прокрутка; } /* Стили полосы прокрутки */ ::-вебкит-полоса прокрутки { ширина: 12 пикселей; высота: 12 пикселей; } ::-webkit-scrollbar-track { граница: 1px сплошной желто-зеленый; радиус границы: 10px; } ::-webkit-scrollbar-thumb { фон: желто-зеленый; радиус границы: 10px; } ::-webkit-scrollbar-thumb: hover { фон: #88ba1c; }

<тело> <дел> Эффективная передача кросс-медийной информации без флокцинауцинигилипилификации кросс-медийной ценности. Быстро максимизируйте своевременные результаты для полномочных схем в реальном времени.

Больше настроенных полос прокрутки →
Коробка прокрутки с изображениями
Вы также можете добавлять изображения в поле прокрутки. Это может быть либо фоновое изображение, либо одно или несколько изображений переднего плана. Нажмите на ссылку, чтобы добавить изображения в поле прокрутки!
Дополнительные поля прокрутки изображений →
Границы прокрутки
Вот пример поля прокрутки HTML с добавленной рамкой. Нажмите на ссылку, чтобы добавить рамку в поле прокрутки!

К этому полю прокрутки добавлена рамка. Вы можете добавлять границы к чему угодно в HTML, включая поля прокрутки.
Больше границ прокрутки →
Горизонтальная спираль
Вот пример поля прокрутки HTML только с горизонтальной прокруткой. Нажмите на ссылку, чтобы добавить горизонтальную прокрутку в поле прокрутки!
<дел> <р> Используя overflow-x, мы можем создавать полосы прокрутки, когда содержимое этого div шире контейнера. Если установить для этого абзаца значение 200 процентов, он станет на 200 процентов шире родительского контейнера, что приведет к переполнению.

Больше горизонтальной прокрутки →

Scroll html: Атрибут scroll | htmlbook.ru

Поле прокрутки HTML

Базовое поле прокрутки HTML