Полосы прокрутки позволяют просматривать содержимое блочного элемента, если оно целиком в него не помещается и выходит за область заданных размеров. Чтобы добавить полосы прокрутки используется свойство overflow, которое принимает одно из четырех значений.
visible — отображается все содержание элемента, даже за пределами установленной
высоты и ширины.
hidden — отображается только область внутри элемента, остальное будет
обрезано.
scroll — всегда добавляются полосы прокрутки.
auto — полосы прокрутки добавляются только при необходимости.
При отображении полос прокрутки обязательно следует указывать размер блока с помощью атрибутов width (ширина) и height (высота).
Приведенный ниже пример демонстрирует создание текстового блока с полосой прокрутки (пример 1).
Пример 1. Полосы прокрутки для отдельного элемента<div style="overflow: scroll; width:
300px; height: 150px; border: solid 1px black">
<h2>Новости сайта</h2>
<p>Новость 1. Выпили</p>
<p>Новость 2. Закусили</p>
<p>Новость 3. Повторили n раз</p>
<p>Новость n+2. А что дальше было, уже ни для кого не новость</p>
</div>
</body>
</html>
Результат примера показан ниже.
Новость 1. Выпили
Новость 2. Закусили
Новость 3. Повторили n раз
Новость n+2. А что дальше было, уже ни для кого не новость
Все, новостей больше не будет...
Браузер Internet Explorer поддерживает также свойство overflow-x и overflow-y, позволяющее отображать или прятать полосы прокрутки, соответственно, по горизонтали и вертикали (пример 2).
Пример 2. Запрет горизонтальной полосы прокрутки