Рейтинг:  0 / 5

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна
 

Если у вас на сайте есть ну очень широкие таблицы или же дизайн сайта не позволяет стандартным образом показывать всю статью на сайте целиком, есть неплохое решение для данных или похожих ситуаций. Это вертикальная и/или горизонтальная полоса прокрутки текста. С её помощью в небольшое окошко или специальный блок можно поместить большой объём текста или широкую/длинную негабаритную таблицу.

Отвечает за появление полосы прокрутки в HTML свойства overflow-x и overflow-y. Применяется они к блочным элементам и поддерживается всеми популярными браузерами.

overflow-x и overflow-y

У свойств overflow-x и overflow-y есть несколько значений:

  • Visible — значение, при котором отображается всё содержание элемента (и за пределами прописанной ширины элемента).
  • Hidden — значение, при котором отображается на сайте в блоке только область внутри элемента.
  • Scroll — значение добавления горизонтальной (overflow-x ) или вертикальной (overflow-y) полосы прокрутки по умолчанию.
  • Auto — горизонтальная (если свойство overflow-x) или вертикальная полоса прокрутки (если свойство overflow-y ) добавляется только при необходимости , в зависимости от ширины браузера.

Синтаксис

Добавление текста с прокручивающимся скроликом внизу. Пример ниже:

<div style="overflow-x: scroll; width: 640px;">Очень объёмный текст…</div>

overflow-x: scroll — добавляет внизу горизонтальную полосу прокрутки.

width:640px — ширина блока равна 640 пикселям.

Вот и всё! Что непонятно — спрашивайте!