Как добавить полосу прокрутки



Полоса прокрутки

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

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

Если необходимо сделать полосу прокрутки на ограниченном участке используйте тег div. Различают <div> - открывающий тег, а </div> - закрывающий. Все, что размещаем между открывающим и закрывающим тегами, находится в блоке (контейнере). Для отображения полос прокрутки необходимо указывать размер блока, используя атрибуты width (ширина) и height (высота). Делается это с помощью атрибута style, который записывают в открывающий тег:




<div style="width:250px; height:250px;">Это текст внутри блока (контейнера).</div>

Для создания текстового блока с полосой прокрутки записываем так:

<div style="width:250px; height:250px; overflow: scroll;">Это текст внутри блока (контейнера)</div>

Пример:

Anyone who reads Old and Middle English literary texts will be familiar with the mid-brown volumes of the EETS, with the symbol of Alfred's jewel embossed on the front cover. Most of the works attributed to King Alfred or to Aelfric, along with some of those by bishop Wulfstan and much anonymous prose and verse from the pre-Conquest period, are to be found within the Society's three series; all of the surviving medieval drama, most of the Middle English romances, much religious and secular prose and verse including the English works of John Gower, Thomas Hoccleve and most of Caxton's prints all find their place in the publications. Without EETS editions, study of medieval English texts would hardly be possible.

Можно задать стили для контейнера, присвоив класс, например:layer.

<style> .layer { overflow: scroll; /* Добавляем полосу прокрутки */ width: 200px; /* Ширина блока */ height: 100px; /* Высота блока */ padding: 5px; /* Поля вокруг текста */ border: solid 1px black; /* Параметры рамки */ } </style> <div class="layer"> <h2>Middle English literary </h2> <p>Anyone who reads Old and Middle English literary texts will be familiar with the mid-brown volumes of the EETS, with the symbol of Alfred's jewel embossed on the front cover. Most of the works attributed to King Alfred or to Aelfric, along with some of those by bishop Wulfstan and much anonymous prose and verse from the pre-Conquest period, are to be found within the Society's three series; all of the surviving medieval drama, most of the Middle English romances, much religious and secular prose and verse including the English works of John Gower, Thomas Hoccleve and most of Caxton's prints all find their place in the publications. Without EETS editions, study of medieval English texts would hardly be possible.</p> </div>

Пример:

Middle English literary

Anyone who reads Old and Middle English literary texts will be familiar with the mid-brown volumes of the EETS, with the symbol of Alfred's jewel embossed on the front cover. Most of the works attributed to King Alfred or to Aelfric, along with some of those by bishop Wulfstan and much anonymous prose and verse from the pre-Conquest period, are to be found within the Society's three series; all of the surviving medieval drama, most of the Middle English romances, much religious and secular prose and verse including the English works of John Gower, Thomas Hoccleve and most of Caxton's prints all find their place in the publications. Without EETS editions, study of medieval English texts would hardly be possible.

Обратите внимание. В нижнем блоке (пример) автоматически образовалась полоса прокрутки, так как текст ушел за размер контейнера. Стиль для данного контейнера в CSS прописан: overflow: auto;.

Атрибуты стиля overflow-x и overflow-y задают полосы прокрутки по горизонтали и вертикали. Свойства используют такие же как и у атрибута стиля overflow.

22.09.2013