Разное

Прокрутка в div: html — Прокрутка в div

19.11.1982

Содержание

html — div блок с прокруткой

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

.wrapper {
    overflow: scroll;
    height: 100%;
    overflow-x: hidden;
    
}

.main {
    display: flex;
    height: 100%;
    margin: 0% 10%;
}

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0px;
}

header {
    background-color: gray;
}

footer {
    background-color: gray;
    height: 12px;
}

li {
    padding: 20px;
}
<body>
    <div>
        <div>
            <header> Text
                <div> 1 </div>
            </header>
            <div>
                <ul>

                    <li>
                        Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы.
 
  И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
                        Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.

                    </li>

                    <li>
                        Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
                        Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.

                    </li>
                    <li>
                        Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
 
 


                    </li>


                </ul>
            </div>
            <footer> </footer>
        </div>
        <div>
            <header> Text</header>
            <div>
                <ul>

                    <li>
                        Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
                        Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.

                    </li>

                    <li>
                        Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
 
 
 
                        Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.

                    </li>

                    <li>
                        Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
                        Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.

                    </li>

                </ul>
            </div>
            <footer>
            </footer>
        </div>

    </div>

</body>
  • html
  • css

1

Например, так:

.wrapper {
  overflow: scroll;
  height: 100%;
  overflow-x: hidden;
  flex: 1 0;
}

. main {
  display: flex;
  height: 100%;
  margin: 0% 10%;
}

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0px;
}

header {
  background-color: gray;
}

footer {
  background-color: gray;
  height: 12px;
}

li {
  padding: 20px;
}

.container {
  display: flex;
  flex-direction: column;
}
<div>
  <div>
    <header> Text
      <div> 1 </div>
    </header>
    <div>
      <ul>
        <li>
          Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
          Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
 
 
        </li>
        <li>
          Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
          Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
        </li>
        <li>
          Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
        </li>
      </ul>
    </div>
    <footer> </footer>
  </div>
  <div>
    <header> Text</header>
    <div>
      <ul>
        <li>
          Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы.
 
 
  И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
          Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
        </li>
        <li>
          Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
          Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
        </li>
        <li>
          Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
          Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.
 
 
 
        </li>
      </ul>
    </div>
    <footer>
    </footer>
  </div>

</div>

3

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.wrapper {
  height: 100%;
  overflow: auto;
}

.main {
  display: flex;
  height: 100%;
  margin: 0% 10%;
}

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0px;
}

header {
  background-color: gray;
}

footer {
  background-color: gray;
  height: 12px;
}

li {
  padding: 20px;
}
<body>
  <div>
    <div>
      <header> Text
        <div> 1 </div>
      </header>
      <div>
        <ul>

          <li>
            Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы.  И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
            Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.

          </li>

          <li>
            Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
            Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.

          </li>
          <li>
            Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
 
 


          </li>


        </ul>
      </div>
      <footer> </footer>
    </div>
    <div>
      <header> Text</header>
      <div>
        <ul>

          <li>
            Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
            Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.

          </li>

          <li>
            Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%. 
            Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.

          </li>

          <li>
            Поскольку низ блока #layout — это карман, он для футера должен быть пустым, не отображающим объекты страницы. И тут встречаемся с ещё одним ограничением — мы не можем делать пустой карман за счёт padding в #layout, потому что тогда он станет больше 100%.
            Не спасёт и margin — пустоту нужно делать за счёт свойств вложенных элементов.

          </li>

        </ul>
      </div>
      <footer>
      </footer>
    </div>

  </div>

</body>

Ваш ответ

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

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

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

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

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

Почта

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

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

Почта

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

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

Html прокрутка внутри div

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Данная публикация представляет собой перевод статьи « HTML Scroll Box » , подготовленной дружной командой проекта Интернет-технологии.ру

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

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

scroll – при выборе этого параметра добавляется прокрутка на постоянной основе.

visible – данный параметр задаёт видимость всего содержимого элемента.

hidden – параметр задаёт отображение только внутри области элемента.


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

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

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

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

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

Код CSS

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

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

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

Код CSS

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

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

Код HTML и CSS

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

Код HTML и CSS

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

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

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

Свойство overflow — обработка вылезающего содержимого

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

Синтаксис

селектор { overflow: hidden | scroll | auto | visible; }

Значения

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

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

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

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

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div>#elem { overflow: visible; border: 1px solid red; width: 200px; }

:

Пример .

Значение visible

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

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div>#elem { width: 200px; height: 40px; overflow: visible; border: 1px solid red; margin-bottom: 20px; }

:

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

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

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div>#elem { overflow: hidden; width: 200px; height: 40px; border: 1px solid red; }

:

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

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

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div>#elem { overflow: scroll; width: 400px; height: 100px; border: 1px solid red; }

:

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

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

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div>#elem { overflow: auto; width: 400px; height: 100px; border: 1px solid red; }

:

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

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

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div>#elem { width: 200px; overflow: auto; height: 100px; border: 1px solid red; }

:

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

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

CSS Scroll Snap — мощное средство для создания прокручиваемых контейнеров без JavaScript

Чтобы создать прокручиваемый контейнер, нужно настроить отображение содержимого — его не должно быть видно за пределами блока. Эта задача решается с помощью CSS-свойства overflow. Можно использовать значение auto или scroll. Пример кода:

See the Pen
Basic Slider by Pochemuta (@pochemuta)
on CodePen.

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

Решить эту проблему поможет CSS Scroll Snap. Он позволяет привязать положение прокрутки к местоположению или определённым элементам после того, как пользователь прокрутил страницу. Вот классный пример использования из статьи Practical CSS Scroll Snapping:

Простой прокручиваемый контейнер

Чтобы добиться похожего эффекта, добавим в наш код два свойства: scroll-snap-type и scroll-snap-align. Первое нужно указать для контейнера, второе — для дочерних элементов.

See the Pen
Scroll Snap by Pochemuta (@pochemuta)
on CodePen.


Отлично — теперь элементы можно пролистывать свайпом, а не перетаскивать пальцем через всю ширину экрана. Посмотрим, какие ещё возможности даёт CSS Scroll Snap.

1

Настройка направления и строгости привязки

Свойство scroll-snap-type задаётся контейнеру и позволяет указать направление, в котором происходит привязка прокрутки (x или y), а также строгость привязки (none, mandatory или proximity).

С направлением всё просто:

  • горизонтальная прокрутка — x или ключевое слово inline:
  • вертикальная прокрутка — y или ключевое слово block;
  • привязка в обоих направлениях — both.

Чуть сложнее увидеть разницу между значениями mandatory и proximity, которые определяют строгость привязки:

  • none — нет привязки к точке;
  • mandatory — обязательное смещение прокрутки к указанной точке;
  • proximity — смещение происходит только в тех ситуациях, когда область видимости находится близко к точке привязки. Степень близости браузер определяет самостоятельно.

Главный плюс mandatory — предсказуемость. Вы знаете, что браузер точно сместит область видимости к заданной точке. Главный минус — негибкость. Например, если содержимое при вертикальной прокрутке слишком большое по высоте, то пользователи окажутся в неприятной ситуации — они просто не смогут переместиться к определённому месту, браузер будет сразу перекидывать их к точке привязки.

See the Pen
Scroll Snap mandatory by Pochemuta (@pochemuta)
on CodePen.


Текст не помещается в области видимости по высоте, последние строчки невозможно прочитать, потому что срабатывает строгая привязка к прокрутке. Чтобы такого эффекта не было, можно заменить mandatory на proximity. Но и здесь остаётся опасность пролистывания — всё зависит от браузера. Проблему можно решить с помощью свойства scroll-padding, о котором мы поговорим ниже.

2

Изменение точек привязки

Свойство scroll-snap-align задаётся дочерним элементам. Это те самые точки привязки, про которые шла речь при изучении значений mandatory и proximity свойства scroll-snap-type. Доступные значения scroll-snap-align — start, center и end.

Чтобы было проще понять разницу, посмотрите на этот пример:

See the Pen
Scroll Snap start, center, end by Pochemuta (@pochemuta)
on CodePen.


У первого и второго элементов значение start, у третьего — center, — у четвёртого и пятого — end. Прокрутите содержимое контейнера вверх и вниз. Проследите, как меняется позиция каждого элемента.

При горизонтальной прокрутке привязка работает аналогичным образом. Start в таком случае — левый край контейнера, end — правый край.

3

Управление прокруткой

Свойство scroll-snap-stop задаётся дочерним элементам и позволяет управлять прокруткой. Принимает два значения:

  • normal — привязка происходит только тогда, когда пользователь прекращает прокрутку, отдельные точки привязки могут быть пропущены;
  • always — контейнер останавливается на каждой точке привязке, прежде чем пользователь сможет скроллить дальше.

Значение по умолчанию — normal. Но если вы хотите исключить вероятность того, что пользователь пролистнёт важный элемент, установите значение always.

4

Настройка внутреннего отступа контейнера

Свойство scroll-padding задаётся контейнеру и устанавливает внутренний отступ. Вместо сокращённой записи можно использовать более конкретную: scroll-padding-top/right/bottom/left.

Внутренний отступ может быть полезен, если высота элемента больше высоты контейнера. Это решает рассмотренную выше проблему использования значения mandatory свойства scroll-snap-type. Можно просто указать, чтобы при пролистывании сверху оставалось достаточно место для отображения последних строк фрагмента текста.

See the Pen
Scroll Snap padding by Pochemuta (@pochemuta)
on CodePen.

Ещё одно полезное применение — если внутри контейнера есть фиксированный блок. Отступ поможет избавиться от перекрывания содержимого.

5

Настройка внешнего отступа элемента

Свойство scroll-margin задаётся дочерним элементам и устанавливает внешний отступ до позиции прокрутки. Вместо сокращённой записи можно использовать более конкретную: scroll-margin-top/right/bottom/left.

See the Pen
Scroll Snap margin by Pochemuta (@pochemuta)
on CodePen.

Например, здесь внешний отступ задан только третьему элементу. Он занимает позицию в 50px от позиции прокрутки. При этом следующие за ним элементы снова привязываются к указанной точке.

Поддержка в браузерах:

В последних версиях популярных браузеров полная поддержка. В Internet Explorer 10 и 11 — частичная.

Актуальность проверяйте на сайте Can I Use.

Узнать больше:

  • Спецификация CSS Scroll Snap

Ещё интересные материалы про CSS и фронтенд:

  • Современный CSS мощнее, чем вам кажется: 12 примеров, в которых не нужен JavaScript
  • Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице
  • Как стать фронтенд-разработчиком в 2021 году: дорожная карта

Реклама на Tproger: найдем для вас разработчиков нужного стека и уровня.

Подробнее

Реклама на tproger.ru

Загрузка

overflow-y | CSS | WebReference

  • Содержание
    • Краткая информация
    • Синтаксис
    • Значения
    • Песочница
    • Пример
    • Спецификация
    • Браузеры

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

Значение по умолчаниюvisible
НаследуетсяНет
ПрименяетсяК блочным элементам
АнимируетсяНет

Синтаксис 

overflow-y: auto | hidden | scroll | visible

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

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

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

auto hidden scroll visible

div {
  height: 50px;
  overflow-y: {{ playgroundValue }};
}

Пример

<!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>Гетерогенный голубой гель</h3> <p>Кондуктометрия мягко передает электронный способ получения независимо от последствий проникновения метилкарбиола внутрь. </p> </div> </body> </html>

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

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

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

Объект.style.overflowY

Спецификация

СпецификацияСтатус
CSS Overflow Module Level 3Рабочий проект

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

51219.533.5
11103

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Форматирование

См. также

  • overflow
  • overflow-x
  • Отслеживание прокрутки

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 02.03.2020

Редакторы: Влад Мержевич

Прокрутка в div, td | PHPClub

BRat
o_0