Как в html сделать scrolling в div с помощью CSS

У некоторых студентов возникал вопрос как сделать в html блоке scrolling. Разберем этот несложный вопрос с разных сторон на примере div с текстом-рыбой.

Допустим у нас есть html-блок, к примеру div, в котором есть какое-то количество контента. Посмотрим в каком случае в нем появится scrolling.

Пусть мы имеем такой div (посмотрим как сделать так чтобы в нем отображался scrolling), см. html-код блока далее:

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
  in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
  cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

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

Veryveryveryverylongword-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 

Теперь укажем фиксированную ширину и высоту нашему html div-у:

<div style="width:100px;height:100px;">
  ...
</div>

FYI: Для удобочитаемости статьи, в листингах кода, вместо текста-рыбы, я пишу троеточие.

С зафиксированными размерами поведение у блока как показано ниже: div ограничился в размерах, однако контент выходит за его пределы и все равно виден, как по вертикали так и по горизонтали если встречается слово, которое нельзя перенести. См. далее пример:

Veryveryveryverylongword-Loremipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 

Браузер рендерит html так как показано выше, потому что свойство overflow блока div по-умолчанию имеет значение visible. То есть все что переполняет размеры блока - будет оставаться видным. Давайте попробуем изменить значение этого css-свойства на hidden и посмотрим что будет:

<div style="width:100px;height:100px;overflow:hidden;">
  ...
</div>
Veryveryveryverylongword-Loremipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 

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

Но, слава всевышнему, в css есть возможность заставить html блок div отображать в таком случае scrolling. Для этого нужно изменить значение overflow на auto. Давайте посмотрим как это выглядит:

<div style="width:100px;height:100px;overflow:auto;">
  ...
</div>
Veryveryveryverylongword-Loremipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 

Вуаля! Наш html-блок div теперь имеет scrolling по горизонтали и по вертикали и весь контент, переполнивший div, можно просмотреть проскроллив блок.

Значение свойства overflow auto говорит о том что браузер будет отображать контрол scrolling только в том случае если это необходимо, если нет - не будет даже намека на скролл. Давайте уберем почти весь контент и посмотрим:

1

 

Есть еще одно значение свойства overflow - scroll. Оно скажет браузеру, что у данного div-а нужно отображать scrolling, даже если контента мало. В этом случае scrolling просто будет показан неактивным. Смотрите:

<div style="width:100px;height:100px;overflow:scroll;">
  1
</div>
1

 

При появлении достаточного количества контента в контейнере div, scrolling становится активным и работает точно как в случае с auto. Смотрите пример:

<div style="width:100px;height:100px;overflow:scroll;">
  ...
</div>
Veryveryveryverylongword-Loremipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 

Это вся основная информация по управлению scrolling-ом в html для блока div с помощью css. Обратите внимание на css-свойства overflow-x и overflow-y (эти свойства реализованы CSS3). Они позволят управлять поведением div при переполнении контентом по осям x и y соответственно по-отдельности.

Теги: 

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

Filtered HTML

  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешённые HTML-теги: <a> <em> <i> <strong> <b> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <br>
  • Строки и параграфы переносятся автоматически.

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.
CAPTCHA
CAPTCHA на основе изображений
Введите код с картинки