Как создать 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.

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

html — Ползунок прокрутки при overflow scroll. Возможность переместиться по блоку

Вопрос задан

1 год 3 месяца назад

Изменён 1 год 3 месяца назад

Просмотрен 366 раз

У меня есть блок в блоке и мне нужно добиться, чтобы у блока second_div снизу появилась полоса прокрутки. А также у этих полос прокрутки появились ползунки, и я мог переместиться в любое место в этом блоке second_div. Вот мой код https://jsfiddle.net/ManuOP/aopk3new/8/

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

Спасибо.

HTML

<div>
<div>Hello</div>
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
div {
    display: flex;
}
div#main_div {
    height: 80vh;
    width: 80vw;
    background: red;
    overflow: hidden; 
}
div#second_div {
    height: 10000px;
    width: 10000px;
    background: green;
    overflow: scroll;
}
  • html
  • css
  • scroll
  • overflow
  • hidden

У тебя overflow: scroll; должен стоять на родителе, а не дочернем элементе, плюс div {display: flex;} нужно убрать. Код будет выглядеть так:

html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
div#main_div {
    height: 80vh;
    width: 80vw;
    background: red;
    overflow: scroll; 
}
div#second_div {
    height: 10000px;
    width: 10000px;
    background: green;
    position: relative;
    
}

И парочка советов:

  1. Не стоит использовать id, лучше классы.
  2. Если обнулять маргины-паддинги, то лучше у всего. То есть, не html html, body { margin: 0; …}, а * {margin: 0; …}

4

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

css — Как сделать полосу прокрутки в div видимой только при необходимости?

спросил

Изменено 1 год, 7 месяцев назад

Просмотрено 332 тысячи раз

У меня есть этот div:

 
вот текст

Полосы прокрутки видны всегда, даже если текст не переполняется. Я хочу, чтобы полосы прокрутки были видны только тогда, когда это необходимо, то есть они видны только тогда, когда в поле достаточно текста, в котором они нужны. Как текстовое поле. Как мне это сделать? Или мой единственный вариант стилизовать текстовое поле, чтобы оно выглядело как div?

  • css
  • html
  • полоса прокрутки

3

Использовать переполнение

: авто . Полосы прокрутки будут появляться только тогда, когда это необходимо.

(Кроме того, вы также можете указать только для полосы прокрутки x или y: overflow-x: auto и overflow-y: auto ).

4

попробуйте так:

 
вот текст

попробовать

 
вот текст

0

Изменить свойство overflow CSS block на auto .

 переполнение: авто;

Автоматически добавляет полосу прокрутки слева только при необходимости.

попытка

Я обнаружил, что высота div все еще показывается, есть ли в нем текст или нет. Таким образом, вы можете использовать это для достижения наилучших результатов.

 <дел>

Вы можете попробовать ниже:

 
Text

1

Stackblitz Playgrond

 

<голова>
    
    <стиль>
    #прокручиваемый-контент {
        фон: #еее;
        высота: 150 пикселей;
        ширина: 400 пикселей;
        переполнение-у: прокрутка;
    }
    

<тело>
    
 Lorem Ipsum — это просто фиктивный текст полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов.  Он пережил не только пять столетий, но и скачок в электронный набор текста, оставаясь практически неизменным. Он был популярен в 1960-е годы с выпуском листов Letraset, содержащих отрывки Lorem Ipsum, а совсем недавно с программным обеспечением для настольных издательских систем, таким как Aldus PageMaker, включая версии Lorem Ipsum. 

    

    
 Lorem Ipsum — это просто фиктивный текст полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов. Он пережил не только пять столетий, но и скачок в электронный набор текста, оставаясь практически неизменным. Он был популярен в 1960-е годы с выпуском листов Letraset, содержащих отрывки Lorem Ipsum, а совсем недавно с программным обеспечением для настольных издательских систем, таким как Aldus PageMaker, включая версии Lorem Ipsum.

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

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

❮ Предыдущий Полное руководство по CSS Далее ❯


Пример

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

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

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

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

div.ex4 {
  переполнение: клип;
}

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

Попробуйте сами »

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

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

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

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

Показать демонстрацию ❯

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

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

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

Собственность
перелив 1,0 4,0 1,0 1,0 7,0

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

Синтаксис CSS

overflow: visible|hidden|clip|scroll|auto|initial|inherit;

Значения свойств

Значение Описание Демо
видимый Переполнение не отсекается. Он отображается за пределами поля элемента. Это по умолчанию Демонстрация ❯
скрытый Переполнение обрезается, и остальное содержимое будет невидимым. Содержимое можно прокручивать программно (например, установив scrollLeft или прокрутить()) Демонстрация ❯
зажим Переполнение обрезается, и остальное содержимое будет невидимым. Запрещает прокрутку, включая программную прокрутку. Демонстрация ❯
свиток Переполнение обрезается, но добавляется полоса прокрутки для просмотра остального содержимого Демонстрация ❯
авто Если переполнение обрезано, необходимо добавить полосу прокрутки, чтобы увидеть остальную часть содержимого Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать о начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

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

Учебник CSS: Переполнение CSS

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

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

❮ Предыдущий Полное руководство по CSS Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery


Top Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.

No related posts.