Разное

Div со скроллом: Как создать div блок с прокруткой?

31.01.2018

Как создать div блок с прокруткой?


1. Что такое overflow в CSS?
2. Свойства и значения overflow
3. Принудительная установка вертикальной и горизонтальной прокрутки в блоке CSS
4. Пример div блока с прокруткой

В данной статье мы разберём вопрос создания блока (div) фиксированного размера с возможностью прокрутки по горизонтали и вертикали. Это можно реализовать средствами CSS. За это отвечает свойство overflow.

О полезном свойстве overflow


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

overflow-x — отвечает за отображением содержания блочного элемента по горизонтали.
overflow-y — отвечает за отображением содержания блочного элемента по вертикали.

Код CSS

.prokrutka {

overflow: auto; /* свойство для прокрутки по горизонтали. Автоматом, если содержимое больше блока */
 

}

Свойства и значения overflow


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

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

Код CSS

.prokrutka {
 

width:150px; /* ширина нашего блока */

height:100px; /* высота нашего блока */

background: #fff; /* цвет фона, белый */

border: 1px solid #C1C1C1; /* размер и цвет границы блока */

overflow: auto; /* свойство для прокрутки по горизонтали. Автоматом, если больше блока */

}

Принудительная установка прокрутки в блоке CSS


Можно также принудительно создать прокрутку по высоте и ширине. Для этого каждой оси: overflow-y: scroll; (вертикаль) overflow-x: scroll; (горизонталь) укажем параметр scroll, принудительная прокрутка.

Код HTML и CSS

.prokrutka {

height:150px; /* высота нашего блока */

background: #fff; /* цвет фона, белый */
 

border: 1px solid #C1C1C1; /* размер и цвет границы блока */

overflow-x: scroll; /* прокрутка по горизонтали */

overflow-y: scroll; /* прокрутка по вертикали */

}

Пример div блока с прокруткой


Код HTML и CSS
<html>

  <head>

    <title>Пример работы CSS</title>

<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<style>

.prokrutka {

height: 200px; /* высота нашего блока */

width: 200px; /* ширина нашего блока */

background: #fff; /* цвет фона, белый */

border: 1px solid #C1C1C1; /* размер и цвет границы блока */
 

overflow-x: scroll; /* прокрутка по горизонтали */

overflow-y: scroll; /* прокрутка по вертикали */

}

</style>
  </head>
  <body>

<div class="prokrutka">

А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. 
 

</div>

  </body>

</html>

Одно из свойств overflow можно убрать, тогда останется прокрутка только по одной оси, чего вполне достаточно.
Посмотреть работу скрипта на примере ниже.Демонстрация Скачать исходники
Можно указать принудительную прокрутку только для одной оси. Для этого соответственно уберите строку либо с overflow-x, либо с overflow-y.

Спасибо за внимание! Надеюсь статья была полезна!

overflow | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+3.61.0+1.0+1.0+

Краткая информация

Значение по умолчаниюvisible
НаследуетсяНет
ПрименяетсяК блочным элементам
Процентная записьНеприменима
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/visufx.html#propdef-overflow

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

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

Синтаксис

overflow: auto | hidden | scroll | visible | inherit

Значения

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

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>overflow</title>
  <style>
   .layer {
    overflow: scroll; /* Добавляем полосы прокрутки */
    width: 300px; /* Ширина блока */
    height: 150px; /* Высота блока */
    padding: 5px; /* Поля вокруг текста */
    border: solid 1px black; /* Параметры рамки */
   } 
  </style>
 </head>
 <body> 
   <div>
   <h3>Duis te feugifacilisi</h3>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
    nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
    Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
    lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div> 
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства overflow

Объектная модель

[window.]document.getElementById(«elementID»).style.overflow

Браузеры

Internet Explorer до версии 7.0 включительно:

  • не поддерживает значение inherit;
  • относительно позиционированные дочерние элементы, значения overflow у которых заданы как auto или scroll ведут себя словно у них задано position: fixed.

Internet Explorer 8:

  • Сочетание overflow со значением scroll со свойствами max-height и float может привести к пропаданию элементов веб-страницы, в браузере выводится пустой экран.
  • Для блока, у которого указаны свойства float и overflow со значением scroll, игнорируется ширина, заданная через свойство max-width.
  • Высота блока с горизонтальной полосой прокрутки увеличивается на высоту скролбара, хотя по спецификации CSS заданные размеры должны включать в себя и полосы прокрутки.
Firefox 3.6 некорректно применяет overflow к группам ячеек таблицы (<thead>, <tbody>, <tfoot>).

div с прокруткой

Вступление

Иногда необходимо большой кусок текста разместить в маленьком окошке, который полностью туда не помещается, для решения этой проблемы легко создать слой с прокруткой — div с прокруткой.

Понадобится

Слой с фиксированным размером и CSS-стиль.

CSS

В CSS-классе

.scroll устанавливаются параметры 600px в длину и 300px в высоту, внутренний отступ, рамка и цвет фона. НО! Самое главное параметр overflow:auto устанавливает появление полосы прокрутки при количестве текста большим, чем размер слоя.

.scroll { width:500px; height:300px; /* необходим фиксированный размер */ overflow:auto; /* прокрутка появляется по необходимости */ padding:10px 20px; border:#999 1px solid; background-color:#FAFAFA; }

HTML

<div>Наибольшее распространение получили этиленгликолевые охлаждающие жидкости на основе этиленгликоля и воды (дистиллированной) с комплексом присадок. Антифризы получаются как водные растворы соответствующих концентратов. В процессе эксплуатации качество антифриза можно контролировать по плотности. Из охлаждающей жидкости в процессе эксплуатации в первую очередь испаряется вода, которую следует периодически доливать (дистиллированную). Необходимо следить за тем, чтобы в антифризы не попадали бензин и масла, так как они вызывают вспенивание и выброс жидкости из системы. Срок службы охлаждающих жидкостей типа «Тосол» и «Лена» ограничивается долговечностью присадок и обычно составляет 2 года; по пробегу для различных автомобилей в среднем составляет 50000 км. При первом техобслуживании подержанного автомобиля следует заменить охлаждающую жидкость. После слива старой жидкости заправьте систему чистой водой, пустите двигатель и дайте ему поработать на холостых оборотах 15—20 минут; затем слейте воду и заправьте систему новой охлаждающей жидкостью.</div>

Результат

На экране вы увидите небольшую рамку с текстом и с границей серого цвета.

Наибольшее распространение получили этиленгликолевые охлаждающие жидкости на основе этиленгликоля и воды (дистиллированной) с комплексом присадок.

Антифризы получаются как водные растворы соответствующих концентратов. В процессе эксплуатации качество антифриза можно контролировать по плотности. Из охлаждающей жидкости в процессе эксплуатации в первую очередь испаряется вода, которую следует периодически доливать (дистиллированную). Необходимо следить за тем, чтобы в антифризы не попадали бензин и масла, так как они вызывают вспенивание и выброс жидкости из системы.

Срок службы охлаждающих жидкостей типа «Тосол» и «Лена» ограничивается долговечностью присадок и обычно составляет 2 года; по пробегу для различных автомобилей в среднем составляет 50000 км.

При первом техобслуживании подержанного автомобиля следует заменить охлаждающую жидкость. После слива старой жидкости заправьте систему чистой водой, пустите двигатель и дайте ему поработать на холостых оборотах 15—20 минут; затем слейте воду и заправьте систему новой охлаждающей жидкостью.

overflow-y | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+1.0+9.5+3.0+1.5+2.1+2.0+

Краткая информация

Значение по умолчаниюvisible
НаследуетсяНет
ПрименяетсяК блочным элементам
Процентная записьНеприменима
Ссылка на спецификациюhttp://www.w3.org/TR/css3-box/#overflow-y

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Свойство overflow-y управляет отображением содержания блочного элемента по вертикали, если контент целиком не помещается и выходит за область сверху или снизу от блока.

Синтаксис

overflow-y: auto | hidden | scroll | visible

Значения

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

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>overflow-y</title>
  <style>
   body {
    overflow-y: hidden; /* Убираем вертикальную полосу прокрутки */
   }
   .layer {
    width: 300px; /* Ширина блока */
    height: 150px; /* Высота блока */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <div>
   <h3>Duis te feugifacilisi</h3>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
    nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
    Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
    lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства overflow-y

Объектная модель

[window.]document.getElementById(«elementID»).style.overflowY

CSS свойство переполнения


Пример

Показать различные значения свойств переполнения:

div.ex1 {
переполнение: прокрутка;
}

div.ex2 {
переполнение: скрытое;
}

div.ex3 {
переполнение: авто;
}

div.ex4 {
переполнение: видимый;
}

Попробуй сам »

Определение и использование

Свойство overflow указывает, что должно произойти, если содержимое переполняет ящик элемента.

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

Примечание: Свойство overflow работает только для блочных элементов с указанной высотой.

Значение по умолчанию: видимый
Наследуется: нет
Анимационный: нет.Читайте о анимации
Версия: CSS2
Синтаксис JavaScript: объект .style.overflow = «scroll» Попытайся

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Недвижимость
переполнение 1.0 4,0 1,0 1,0 7,0

Примечание: В OS X Lion (на Mac) полосы прокрутки по умолчанию скрыты и отображаются только при использовании (даже если установлен параметр «overflow: scroll»).

Синтаксис CSS

переполнение: видимое | скрытое | прокрутка | авто | начальное | наследование;

Значения недвижимости

Значение Описание Сыграйте
видимый Переполнение не ограничено.Он рендерит за пределами поля элемента. Это по умолчанию Играть »
скрыто Переполнение обрезается, а остальная часть содержимого будет невидимой Играть »
свиток Переполнение ограничено, но добавлена ​​полоса прокрутки, чтобы увидеть остальную часть содержимого Играть »
авто Если переполнение ограничено, полоса прокрутки должна быть добавлена, чтобы увидеть остальное содержимое Играть »
начальный Устанавливает для этого свойства значение по умолчанию.Читайте о начальной Играть »
наследуют Унаследует это свойство от родительского элемента. Читать о наследовать

Связанные страницы

Учебник CSS: CSS Overflow

Учебник CSS: Позиционирование CSS

HTML DOM ссылка: свойство переполнения


,
html — прокрутка div внутри div с набором максимальной высоты Переполнение стека
  1. Товары
  2. Клиенты
  3. Случаи использования
  1. Переполнение стека Публичные вопросы и ответы
  2. Команды Частные вопросы и ответы для вашей команды
  3. предприятие Частные вопросы и ответы для вашего предприятия
  4. работы Программирование и связанные с ним технические возможности карьерного роста
  5. Талант Нанимать технический талант
  6. реклама Связаться с разработчиками по всему миру
,
html — прокрутка только содержимого div, остальные должны быть исправлены Переполнение стека
  1. Товары
  2. Клиенты
  3. Случаи использования
  1. Переполнение стека Публичные вопросы и ответы
  2. Команды Частные вопросы и ответы для вашей команды
  3. предприятие Частные вопросы и ответы для вашего предприятия
  4. работы Программирование и связанные с ним технические возможности карьерного роста
  5. Талант Нанимать технический талант
  6. реклама Связаться с разработчиками по всему миру
,

HTML — Как исправить положение div при прокрутке?

Переполнение стека
  1. Товары
  2. Клиенты
  3. Случаи использования
  1. Переполнение стека Публичные вопросы и ответы
  2. Команды Частные вопросы и ответы для вашей команды
  3. предприятие Частные вопросы и ответы для вашего предприятия
  4. работы Программирование и связанные с ним технические возможности карьерного роста
  5. Талант Нанимать технический талант
  6. реклама Связаться с разработчиками по всему миру

Загрузка…

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

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