/
Вопросы и ответы
/
CSS
/

Как сделать скролл внутри блока css

Как сделать скролл внутри блока css

4 года назад

Человек-Молекула

Ответы

1

Для создания блока фиксированного размера с возможностью прокрутки по горизонтали и вертикали необходимо использовать свойство overflow.

Overflow может принимать следующие значения:

  • visible: По умолчанию. Содержимое не обрезается, может отображаться снаружи блока, в котором оно расположено.
  • hidden: Контент обрезается, без предоставления прокрутки.
  • scroll: Содержимое обрезается и браузер использует элементы прокрутки, не важно было ли обрезано содержимое или нет. Это избегает многих проблем касательно появления прокруток и их исчезновения в динамичной среде. Принтеры могут печатать переполненное содержимое.
  • auto: Зависит от агента пользователя. Браузеры такие как Firefox предоставляют прокрутку, если содержимое переполняет блок.

Рассмотрим пример.

Исходный HTML документ:

<div>
  Пример текста, который будет в блоке с полосами прокрути - как 
  горизонтальной так и вертикальной. Для того что бы ими можно было 
  воспользоваться, добавим д____л____и____н____н____о_____е  слово.
</div>

Стили:

div {
  border: 1px solid #000;
  width: 200px;
  height: 50px;
  /* Включаем отображение полос прокрутки по горизонтали
  и по вертикали */
  overflow: auto;
  padding: 20px;
}

Результат: auto-scroll

3 года назад

Вячеслав Межуревский

0

А если блок адаптивный, а мне нужно сделать горизонтальный скрол?

2 года назад

Джими Пяточка

0

ого

3 года назад

Alex

0

огого

3 года назад

Alex

0

Не работает, когда размер блока установлен в %, но меня выручило position: fixed и background: white для другого блока

год назад

Николай м