Разное

Скролл css: scroll-behavior — CSS | MDN

26.12.2022

Свойство overflow

`;document.write(t),showTopNotification()}}
  • ARعربي
  • ENEnglish
  • ESEspañol
  • FAفارسی
  • FRFrançais
  • IDIndonesia
  • ITItaliano
  • JA日本語
  • KO한국어
  • RUРусский
  • TRTürkçe
  • UKУкраїнська
  • ZH简体中文

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

КупитьEPUB/PDF

8 сентября 2019 г.

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

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

Но что, если высота/ширина указаны явно? Тогда блок не может увеличиться, и содержимое «переполняет» блок. Его отображение в этом случае задаётся свойством overflow.

Возможные значения

  • visible
    (по умолчанию)
  • hidden
  • scroll
  • auto

Если не ставить overflow явно или поставить visible, то содержимое отображается за границами блока.

Например:

<style>
  .overflow {
    /* overflow не задан */
    width: 200px;
    height: 80px;
    border: 1px solid black;
  }
</style>
<div>
  visible ЭтотТекстВылезаетСправаЭтотТекстВылезаетСправа
  Этот текст вылезает снизу Этот текст вылезает снизу
  Этот текст вылезает снизу Этот текст вылезает снизу
</div>

Как правило, такое переполнение указывает на ошибку в вёрстке. Если содержимое может быть больше контейнера – используют другие значения.

Переполняющее содержимое не отображается.

<style>
  .overflow {
    overflow: hidden;
    width: 200px;
    height: 80px;
    border: 1px solid black;
  }
</style>
<div>
  hidden ЭтотТекстОбрезанСправаЭтотТекстОбрезанСправа
  Этот текст будет обрезан снизу Этот текст будет обрезан снизу
  Этот текст будет обрезан снизу Этот текст будет обрезан снизу
</div>

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

Это свойство иногда используют от лени, когда какой-то элемент дизайна немного вылезает за границу, и вместо исправления вёрстки его просто скрывают.

Как правило, долго оно не живёт, вёрстку всё равно приходится исправлять.

При переполнении отображается полоса прокрутки.

<style>
  .overflow {
    overflow: auto;
    width: 200px;
    height: 100px;
    border: 1px solid black;
  }
</style>
<div>
  auto ЭтотТекстДастПрокруткуСправаЭтотТекстДастПрокруткуСправа
  Этот текст даст прокрутку снизу Этот текст даст прокрутку снизу
  Этот текст даст прокрутку снизу
</div>

Полоса прокрутки отображается всегда.

<style>
  .overflow {
    overflow: scroll;
    width: 200px;
    height: 80px;
    border: 1px solid black;
  }
</style>
<div>
  scroll
  Переполнения нет.
</div>

То же самое, что auto, но полоса прокрутки видна всегда, даже если переполнения нет.

Можно указать поведение блока при переполнении по ширине в overflow-x и высоте – в overflow-y:

<style>
  .overflow {
    overflow-x: auto;
    overflow-y: hidden;
    width: 200px;
    height: 80px;
    border: 1px solid black;
  }
</style>
<div>
  ПоШиринеПолосаПрокруткиAutoПоШиринеПолосаПрокруткиAuto
  Этот текст вылезает снизу Этот текст вылезает снизу
  Этот текст вылезает снизу Этот текст вылезает снизу
</div>

Свойства overflow-x/overflow-y (или оба одновременно: overflow

) задают поведение контейнера при переполнении:

visible
По умолчанию, содержимое вылезает за границы блока.
hidden
Переполняющее содержимое невидимо.
auto
Полоса прокрутки при переполнении.
scroll
Полоса прокрутки всегда.

Кроме того, значение overflow: auto | hidden изменяет поведение контейнера, содержащего float. Так как элемент с float находится вне потока, то обычно контейнер не выделяет под него место. Но если стоит такой overflow, то место выделяется, т.е. контейнер растягивается. Более подробно этот вопрос рассмотрен в статье Свойство float.

Предыдущий урокСледующий урок

Поделиться

Карта учебника

  • © 2007—2022  Илья Кантор
  • о проекте
  • связаться с нами
  • пользовательское соглашение
  • политика конфиденциальности

scroll-behavior — CSS — Дока

  1. Кратко
  2. Пример
  3. Как понять
  4. Как пишется
  5. Подсказки
  6. На практике
    1. Татьяна Фокина советует

Кратко

Секция статьи «Кратко»

Управляет поведением прокрутки внутри блока. Значение smooth делает её плавной.

Пример

Секция статьи «Пример»
html {  scroll-behavior: smooth;}
          html {
  scroll-behavior: smooth;
}

Как понять

Секция статьи «Как понять»

При переходе по якорной ссылке браузер мгновенно прыгает к целевому блоку. То же самое происходит, если изменять положение полосы прокрутки при помощи JS. Чтобы изменить стандартное поведение можно использовать значение smooth. Оно сделает прокрутку плавной. Но в остальных ситуациях, например, при прокрутке пользователем колёсика мышки, свойство scroll-behavior не повлияет на поведение браузера.

Как пишется

Секция статьи «Как пишется»

Возможные значения scroll-behavior:

  • auto — значение по умолчанию, мгновенная прокрутка;
  • smooth — плавная прокрутка.
Открыть демо в новой вкладке

Подсказки

Секция статьи «Подсказки»

💡 Если вы хотите указать scroll-behavior для всей страницы, указывайте его для селектора html. Для селектора body свойство не сработает.

💡 Значение scroll-behavior не наследуется — его нужно указывать для каждого блока с собственной полосой прокрутки.

💡 Браузер сам управляет скоростью и временем плавной прокрутки, сейчас нет способа на это влиять.

На практике

Секция статьи «На практике»

Татьяна Фокина советует

Секция статьи «Татьяна Фокина советует»

🛠 Пользователи могут по какой-то причине отключить анимацию в системе. Например, их укачивает от плавной прокрутки на странице с большим количеством контента. Чтобы этого не произошло, можно использовать директиву @media

с проверкой значения prefers-reduced-motion в условии и анимировать прокрутку только тогда, когда пользователь не отключил анимацию.

@media (prefers-reduced-motion: no-preference) {  .smooth-scroll {    scroll-behavior: smooth;  }}
          @media (prefers-reduced-motion: no-preference) {
  . smooth-scroll {
    scroll-behavior: smooth;
  }
}

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

resize

alt + ←

→

scroll-padding

alt + →

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

❮ Назад Полное руководство по CSS Далее ❯


Пример

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Собственность
переполнение 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
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебник по jQuery

Основные ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3. CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

1 Top3 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры How To
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Свойство CSS overflow-wrap

❮ Назад Полное руководство по CSS Далее ❯


Пример

Разрешить браузеру разбивать строки длинными словами, если они переполняются контейнер:

div {
  overflow-wrap: break-word;
}

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

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

Обертка перелива 9Свойство 0036 указывает, или нет, браузер может разбивать строки длинными словами, если они переполняют контейнер.

Показать демо ❯

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

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

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

Собственность
переливная пленка 23,0 18,0 49,0 6.1 12,1

Синтаксис CSS

overflow-wrap: normal|anywhere|break-word|initial|inherit;

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

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

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

Учебник CSS: CSS Overflow

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


ВЫБОР ЦВЕТА

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

13 HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

1 Top3 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

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

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