Прокрутка элементов

Оцените материал
(0 голосов)

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

Однако свойство overflow позволяет настроить поведение блока в подобной ситуации и добавить возможность прокрутки. Это свойство может принимать следующие значения:

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

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

  • scroll: в блоке отображаются полосы прокрутки, даже если контент весь помещается в границах блока, и таких полос прокрутки не требуется

  • visible: значение по умолчанию, контент отображается, даже если он выходит за границы блока

 

 Рассмотрим применение двух значений:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Прокрутка в CSS3</title>
        <style>
        .article1{
            width: 300px;
            height: 150px;
            margin:15px;
            border: 1px solid #ccc;
            overflow: auto;
        }
        .article2{
            width: 300px;
            height: 150px;
            margin:15px;
            border: 1px solid #ccc;
            overflow: hidden;
        }
        </style>
    </head>
    <body>
        <div class="article1">
        <p>Старый дуб, весь преображенный, раскинувшись шатром сочной, темной зелени, млел, чуть
            колыхаясь в лучах вечернего солнца. Ни корявых пальцев, ни болячек, ни старого недоверия и
            горя – ничего не было видно. Да, это тот самый дуб», – подумал князь
            Андрей, и на него вдруг нашло беспричинное весеннее чувство радости и обновления.</p>
        </div>
        <div class="article2">
        <p>Старый дуб, весь преображенный, раскинувшись шатром сочной, темной зелени, млел, чуть
            колыхаясь в лучах вечернего солнца. Ни корявых пальцев, ни болячек, ни старого недоверия и
            горя – ничего не было видно. Да, это тот самый дуб», – подумал князь
            Андрей, и на него вдруг нашло беспричинное весеннее чувство радости и обновления.</p>
        </div>
    </body>
</html>

Просмотреть  пример

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

overflow-x: auto;
overflow-y: hidden;
Прочитано 551 раз Последнее изменение Воскресенье, 14 августа 2016 12:02
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

TemplateMonster

Поиск по сайту

Связной трэвел

tezeks

Google+