Блог Андрея Юрченко

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

Создаем div блок с прокруткой

Привет! Из данной статьи вы узнаете как создать на своем сайте блок с возможностью прокрутки по вертикали и горизонтали и все это мы запихнем в div, а так же зададим нашему блоку фиксированные размеры. Все это мы реализуем средствами CSS при помощи свойства overflow.

Создаем  div блок с прокруткой

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

Данное свойство overflow отвечает за содержание блочного блока при его отображении, а если конкретнее, то:

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

.prokrutka { overflow: auto; }

auto - автоматическое добавление прокрутки по горизонтали, если содержимое больше блока.

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

Надеюсь основные команды свойства понятны, а теперь рассмотрим пример класса CSS. Устанавливаем нужную ширину и высоту блока с помощью классов width и height. Содержимое блока не будет выходить за пределы этих размеров и далее свойством  overflow: auto; мы задаем прокрутку по горизонтали:

.prokrutka {

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

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

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

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

overflow: auto; /* свойство для прокрутки по горизонтали */

}

В данном примере мы задали определенные CSS классы нашему блоку и задали автоматическую прокрутку по горизонтали. Мы также можем принудительно задать прокрутку по ширине и высоте. Для этого нам нужно каждой оси указать параметр scroll  и прописать команды следующим образом:

.prokrutka {

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

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

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

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

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

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

}

И в конце приведу готовый код  HTML и CSS блока с прокруткой на странице сайта, который вы можете скопировать и вставить в файл html и посмотреть как будет реально выглядеть блок на странице. Вот код:

<html>

<head><>

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

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

<style>

.prokrutka {

height: 200px;

width: 300px;

background: #fff;

border: 1px solid #0000ff;

overflow-x: scroll;

overflow-y: scroll;

}

</style>

</head>

<body>

<center>

<div class=»prokrutka»>

Здесь много разного текста и прочей информации.

Здесь много разного текста и прочей информации.

Здесь много разного текста и прочей информации.

Здесь много разного текста и прочей информации.

Здесь много разного текста и прочей информации.

Здесь много разного текста и прочей информации.

Здесь много разного текста и прочей информации.

Здесь много разного текста и прочей информации.

Здесь много разного текста и прочей информации.

Здесь много разного текста и прочей информации.

</div>

</center>

</body>

</html>

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

На этом все. Если Вам понравилась моя статья, то оставляйте свои комментарии или вопросы ниже.

С уважением, Андрей Юрченко.

Поделитесь статьей в социальных сетях!

Подпишись на RSS-рассылку и получай новые статьи на почту!

Введите свой e-mail:

МАГИЧЕСКИЙ ШАБЛОН ПОДПИСНОЙ СТРАНИЦЫ В ПОДАРОК, ЗАБИРАЙТЕ

Оставить комментарий:

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Комментарии Вконтакте:

Content Tab Three

Блог Андрея Юрченко © 2016

ВВЕРХ