Как добавить скролл блоку css
Перейти к содержимому

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

  • автор:

Прокручиваемый HTML-блок

Создаем блок с прокручиваемым текстом с помощью CSS и HTML

Создаем блок с прокручиваемым текстом с помощью CSS и HTML

Прокручиваемый HTML-блок — это блок, в котором, когда его содержимое больше размеров самого блока, справа и снизу появляются полосы прокрутки. Другими словами, если у вас есть блок, в котором может поместиться около 50 слов, и у вас есть текст, состоящий из 200 слов, в прокручиваемом HTML-блоке появятся полосы прокрутки, чтобы вы могли видеть остальные 150 слов. В стандартном HTML-блоке дополнительный текст просто выходит за его границы.

Создать прокручиваемый HTML-блок ( скролл для сайта ) довольно просто.

Вам просто нужно установить ширину и высоту элемента, а затем использовать свойство CSS overflow , чтобы указать поведение элемента, когда содержимое выходит за его пределы.

Что делать с дополнительным текстом?

Когда текста больше, чем может поместиться в доступное пространство макета, у вас есть несколько вариантов:

  • Перепишите текст, чтобы он стал короче.
  • Позвольте, чтобы текст выходил за пределы контейнера, и надейтесь, что макет может растягиваться, чтобы справиться с этой ситуацией.
  • Обрежьте текст там, где он выходит за пределы контейнера.
  • Добавьте полосы прокрутки (для текста — обычно вертикальные), чтобы с их помощью можно было просмотреть весь текст.

Лучшим вариантом, как правило, является последний: создать прокручиваемый текстовый блок. Тогда пользователь сможет прочитать весь текст, а макет останется без изменений.

HTML и CSS для этого :

здесь текст.

overflow: auto; указывает браузеру добавлять полосы прокрутки ( скролл ), если текст выходит за границы блока div .

Но для того, чтобы это сработало, также нужно задать для этого блока div свойства ширины и высоты, чтобы определить границы контейнера.

Вы также можете обрезать текст, изменив значение свойства overflow с auto на hidden . Если вы не укажете свойство overflow , скролл на сайте работать не будет, и текст будет выходить за границы блока div .

Вы можете добавить полосы прокрутки не только для текста

Если у вас есть большое изображение, которое вы хотите отображать на меньшем пространстве, можно добавить вокруг него полосы прокрутки так же, как и для текста.

Shasta playing frisbee

В этом примере изображение размером 400 на 509 пикселей размещено внутри абзаца, размер которого составляет 300 на 300 пикселей.

Полосы прокрутки могут использоваться в таблицах

Длинные таблицы могут быть очень трудными для восприятия, но, помещая их в блок div ограниченного размера, а затем, добавляя свойство overflow ( как способ сделать скролл ), можно создавать таблицы с большим количеством данных, которые не займут слишком много пространства на странице,

Самый простой способ сделать это — так же, как изображение и текст, просто оберните таблицу в блок div , установите его ширину и высоту и добавьте свойство overflow ( скролл внутри div ):

.
Name Phone
Jennifer 502-5366

Однако при этом имеет место один нюанс. В подобных случаях, как правило, также появляется горизонтальный скролл, потому что браузер предполагает, что, чтобы дать пользователю возможность просмотреть всю таблицу, нужны две полосы прокрутки.

Существует множество способов исправить это, например, изменение ширины таблицы и некоторые другие. Но я предпочитаю просто отключить горизонтальную прокрутку с помощью свойства CSS3 overflow-x . Просто укажите для блока div свойство overflow-x: hidden; , и горизонтальная полоса прокрутки будет удалена. Обязательно проверьте, чтобы одновременно с этим у вас не исчез и сам контент.

Firefox поддерживает использование overflow для тегов TBODY

Одна действительно приятная особенность браузера Firefox заключается в том, что вы можете использовать свойство overflow во внутренних тегах таблиц, таких как tbody и thead или tfoot . Это означает, что вы можете установить полосы прокрутки для содержимого таблицы, а ячейки заголовков останутся привязанными к ним.

Это работает только в Firefox , что не очень хорошо, но это полезная функция, если ваши читатели используют только Firefox . Посмотрите следующий пример, чтобы понять, что я имею в виду.

   Name Phone    Jennifer 502-5366  .

Вадим Дворников автор-переводчик статьи « HTML Scroll Box »

CSS Как сделать прокрутку внутри блока при body(CSS: overflow: hidden)?

В комментарии Вам правильно указали — задать вертикальный размер (высоту):

.wrap
.wrap

В противном случае, содержимое будет растягивать блок, а следовательно и скролл появляться не будет.

body < margin: 0; height: 1500px; overflow: hidden; >.wrap < position: absolute; top: 0; left: 0; height: 100%; width: 100%; padding: 50px; box-sizing: border-box; overflow-y: scroll; background-color: rgba(0, 0, 0, 0.5); >.child

Свойство overflow

Свойство overflow указывает браузеру, как поступать с содержимым (текст, картинки, другие блоки), которое вылазит за границы блока (за его ширину или высоту). Браузер может скрыть вылезающую часть, добавить полосы прокрутки или ничего не делать (оставить как есть — вылезшим за границы).

Синтаксис

Значения

Значение Описание
hidden Скрывает то содержимое, которое вылезло за границы блока.
scroll Добавляет полосы прокрутки, причем всегда, даже если ничего не вылазит (в этом случае они будут неактивными).
auto Добавляет полосы прокрутки при необходимости: если содержимое не помещается — они появятся, если все помещается — их не будет.
visible Не скрывает то содержимое, которое вылезло за границы блока.

Значение по умолчанию: visible .

Пример . Значение visible

В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы. Обрезания не происходит:

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit.

#elem < overflow: visible; border: 1px solid red; width: 200px; >

Пример . Значение visible

А сейчас ограничена не только ширина, но и высота (текст вылезет за блок и по высоте):

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit.

#elem < width: 200px; height: 40px; overflow: visible; border: 1px solid red; margin-bottom: 20px; >

Пример . Значение hidden

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

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit.

#elem < overflow: hidden; width: 200px; height: 40px; border: 1px solid red; >

Пример . Значение scroll

При значении scroll полосы прокрутки будут всегда, даже если ничего не вылазит (в этом случае они будут неактивными). Сейчас текст не вылазит ни по ширине, ни по высоте, но полосы прокрутки все равно есть (неактивные):

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit.

#elem < overflow: scroll; width: 400px; height: 100px; border: 1px solid red; >

Пример . Значение auto

При значении auto полосы прокрутки добавляются только, если содержимое вылазит за контейнер. Сейчас их нет, так как все помещается:

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit.

#elem < overflow: auto; width: 400px; height: 100px; border: 1px solid red; >

Пример . Значение auto

А теперь ограничим ширину — появится горизонтальная полоса прокрутки:

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit.

#elem < width: 200px; overflow: auto; height: 100px; border: 1px solid red; >

Смотрите также

  • свойство word-break ,
    переносящее буквы длинного слова на новую строку
  • свойство overflow-wrap ,
    переносящее буквы длинного слова на новую строку
  • свойство overflow-x ,
    которое обрезает вылезающие по горизонтали части
  • свойство overflow-y ,
    которое обрезает вылезающие по вертикали части

Как сделать scroll в блоке?

c4c0d0f4fb864ad39bcb8446763e6a4d.PNG

Помогите реализовать блок как на скриншоте

  • Вопрос задан более трёх лет назад
  • 9265 просмотров

Комментировать

Решения вопроса 2

0example

Добавляете блоку фиксированную высоту и:
overflow: scroll;

Ответ написан более трёх лет назад

Нравится 3 2 комментария

webirus

через overflow-y: scroll; правильнее.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *