scroll-behavior — CSS — Дока
- Кратко
- Пример
- Как понять
- Как пишется
- Подсказки
- На практике
- Татьяна Фокина советует
Кратко
Скопировано
Управляет поведением прокрутки внутри блока. Значение smooth
делает её плавной.
Пример
Скопировано
html { scroll-behavior: smooth;}
html {
scroll-behavior: smooth;
}
Как понять
Скопировано
При переходе по якорной ссылке браузер мгновенно прыгает к целевому блоку. То же самое происходит, если изменять положение полосы прокрутки при помощи JS. Чтобы изменить стандартное поведение можно использовать значение smooth
. Оно сделает прокрутку плавной. Но в остальных ситуациях, например, при прокрутке пользователем колёсика мышки, свойство scroll
не повлияет на поведение браузера.
Как пишется
Скопировано
Возможные значения scroll
:
auto
— значение по умолчанию, мгновенная прокрутка;smooth
— плавная прокрутка.
Подсказки
Скопировано
💡 Если вы хотите указать scroll
для всей страницы, указывайте его для селектора html
. Для селектора body
свойство не сработает.
💡 Значение scroll
не наследуется — его нужно указывать для каждого блока с собственной полосой прокрутки.
💡 Браузер сам управляет скоростью и временем плавной прокрутки, сейчас нет способа на это влиять.
На практике
Скопировано
Татьяна Фокина советует
Скопировано
🛠 Пользователи могут по какой-то причине отключить анимацию в системе. Например, их укачивает от плавной прокрутки на странице с большим количеством контента. Чтобы этого не произошло, можно использовать директиву @media
с проверкой значения prefers
в условии и анимировать прокрутку только тогда, когда пользователь не отключил анимацию.
@media (prefers-reduced-motion: no-preference) { .smooth-scroll { scroll-behavior: smooth; }}
@media (prefers-reduced-motion: no-preference) {
.smooth-scroll {
scroll-behavior: smooth;
}
}
Во время отправки формы что-то пошло не так. Попробуйте ещё раз?
←
resize
ctrl + alt + ←
→
scroll
ctrl + alt + →
Как добавить отступ к прокрутке (html, css)
Вопрос задан
Изменён 6 месяцев назад
Просмотрен 45 раз
У меня есть несколько секций с айди и кнопки, которые позволяют по этим секциям перемещаться. А еще, у меня есть хедер, который половину секции закрывает. Вопрос в том, как добавить верхний отступ для прокрутки, или что-то, что позволило бы сделать так, чтобы секция начиналась с хедера, а не под ним. Заранее благодарю за помощь. upd. полный код слишком большой, так что описал сам принцип:
.header { height: 80px; background-color: red; position: sticky; top: 0; width: 100%; } #section1, #section2, #section3{ height: 300px; font-size: 2rem; color: #fff; } #section2 { background-color: blueviolet; } #section3 { background-color: seagreen; }
<header></header> <nav> <a href="#section1">Секция 1</a> <a href="#section2">Секция 2</a> <a href="#section3">Секция 3</a></nav> <article> <section>Этот текст должен быть виден полностью после клика по ссылке</section> <section>Этот текст должен быть виден полностью после клика по ссылке</section> <section>Этот текст должен быть виден полностью после клика по ссылке</section> </article>
upd3.
- html
- css
- scss
- scroll
- padding
1
Предлагаю использовать position: sticky
. Поменял в вашем коде эту строчку и обнулил поля у body.
Поддержка: 96%
body { margin: 0; } .header { height: 80px; background-color: red; position: sticky; top: 0; right: 0; width: 100%; } #section1 { height: 300px; color: aqua; } #section2 { height: 300px; color: blueviolet; } #section3 { height: 300px; color: seagreen; }
<header>Header</header> <nav>Nav <a href="#section1">Секция 1</a> <a href="#section2">Секция 2</a> <a href="#section3">Секция 3</a> </nav> <article> <section>section1</section> <section>section2</section> <section>section3</section> </article>
Второй вариант — для нового ТЗ, где хэдер вообще никогда не должен перекрывать контент.
html { scroll-behavior: smooth; } body { margin: 0; } .page { height: 100vh; display: flex; flex-direction: column; } .header { min-height: 80px; background-color: red; } .content { overflow-y: scroll; } #section1 { height: 300px; color: aqua; } #section2 { height: 300px; color: blueviolet; } #section3 { height: 300px; color: seagreen; }
<div> <header> <nav>Nav <a href="#section1">Секция 1</a> <a href="#section2">Секция 2</a> <a href="#section3">Секция 3</a> </nav> </header> <main> <article> <section>section1</section> <section>section2</section> <section>section3</section> </article> </main> </div>
3
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Свойство CSS scroll-behavior
Пример
Добавьте к документу эффект плавной прокрутки:
html {
scroll-behavior: smooth;
}
Попробуйте сами »
Определение и использование
Свойство scroll-behavior
определяет
следует ли плавно анимировать положение прокрутки вместо прямого прыжка,
когда пользователь нажимает на ссылку в прокручиваемом поле.
Значение по умолчанию: | авто |
---|---|
Унаследовано: | нет |
Анимация: | нет. Читать про анимированный |
Версия: | Модуль просмотра CSSOM (рабочий проект) |
Синтаксис JavaScript: | объект .style.scrollBehavior=»гладкий» Попробуй |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Собственность | |||||
---|---|---|---|---|---|
поведение прокрутки | 61,0 | 79,0 | 36,0 | 14,0 | 48,0 |
Синтаксис CSS
scroll-behavior: auto|smooth|initial|inherit;
Значения свойств
Значение | Описание |
---|---|
авто | Разрешает прямой переход «эффект прокрутки» между элементами в поле прокрутки. Это по умолчанию |
гладкая | Позволяет плавно анимировать «эффект прокрутки» между элементами в поле прокрутки. |
начальный | Устанавливает для этого свойства значение по умолчанию. Читать о инициал |
унаследовать | Наследует это свойство от родительского элемента. Читать о унаследовать |
❮ Предыдущий Полное руководство по CSS Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
Основные ссылки
HTML ReferenceCSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3. CSS Reference
Bootstrap Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
4 Top2 Examples
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.
Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
overflow — CSS: каскадные таблицы стилей
Сокращенное свойство CSS overflow
устанавливает желаемое поведение для переполнения элемента — т. е. когда содержимое элемента слишком велико, чтобы поместиться в контекст форматирования блока — в обоих направлениях.
Это свойство является сокращением для следующих свойств CSS:
-
overflow-x
-
перелив-y
/* Значения ключевых слов */ переполнение: видимое; переполнение: скрыто; перелив: зажим; переполнение: прокрутка; переполнение: авто; переполнение: скрытое видимое; /* Глобальные значения */ переполнение: наследовать; переполнение: начальное; переполнение: вернуться; переполнение: обратный слой; переполнение: не установлено;
Свойство overflow
указывается как одно или два ключевых слова, выбранных из списка значений ниже. Если указаны два ключевых слова, первое применяется к .overflow-x
и второй до overflow-y
. В противном случае оба параметра overflow-x
и overflow-y
имеют одинаковое значение.
Значения
-
видимые
Содержимое не обрезается и может отображаться за пределами поля заполнения.
-
скрытый
Содержимое обрезается, если необходимо, чтобы соответствовать отступу. Полосы прокрутки не предоставляются, и не разрешена поддержка прокрутки пользователем (например, путем перетаскивания или использования колеса прокрутки). Содержание можно прокручивать программно (например, установив значение свойства, такого как
scrollLeft
или методscrollTo()
), чтобы элемент по-прежнему оставался контейнером прокрутки.-
зажим
Подобно
hidden
, содержимое обрезается до поля заполнения элемента. Разница междуclip
иhidden
заключается в том, что ключевое словоclip
также запрещает любую прокрутку, включая программную прокрутку. Поле не является контейнером прокрутки и не запускает новый контекст форматирования. Если вы хотите запустить новый контекст форматирования, вы можете использовать 9Отображение 0019: поток-корень , чтобы сделать это.-
свиток
Содержимое обрезается, если необходимо, чтобы соответствовать отступу. Браузеры всегда отображают полосы прокрутки независимо от того, обрезано ли какое-либо содержимое, что предотвращает появление или исчезновение полос прокрутки при изменении содержимого. Принтеры могут по-прежнему печатать переполненный контент.
-
авто
Зависит от пользовательского агента. Если содержимое помещается внутри поля заполнения, оно выглядит так же, как
виден
, но по-прежнему устанавливает новый контекст форматирования блока. Настольные браузеры предоставляют полосы прокрутки, если содержимое выходит за пределы.-
накладка
Ведет себя так же, как
auto
, но полосы прокрутки отображаются поверх содержимого, а не занимают место.
Расширения Mozilla
-
-moz-полосы прокрутки-нет
Not for use in new websites.»> Устаревший Использовать
переполнение: скрыто
вместо этого.-
-moz-полосы прокрутки-горизонтальные
Устаревший Используйте
overflow-x
: прокрутитеoverflow-y
: скрытыйoverflow: вместо этого прокрутите скрытый
.-
-moz-полосы прокрутки-вертикальный
Устаревший Использовать
переполнение-x
: скрытопереполнение-y
: прокрутитьпереполнение: вместо этого скрытая прокрутка
.-
-moz-скрытый-непрокручиваемый
Устаревший Использовать переполнение
: вместо этого обрезать
.
Начиная с Firefox 63, -moz-scrollbars-none
, -moz-scrollbars-horizontal
и -moz-scrollbars-vertical
находятся за настройкой предпочтения функции. В about:config установите layout.css.overflow.moz-scrollbars.enabled 9от 0020 до
истинное
.
Параметры переполнения включают обрезку, отображение полос прокрутки или отображение содержимого, вытекающего из контейнера в окружающую область.
Указание значения, отличного от
visible
(по умолчанию) или clip
, создает новый контекст форматирования блока. Это необходимо по техническим причинам — если плавающий элемент пересекался с прокручиваемым элементом, он принудительно перематывал содержимое после каждого шага прокрутки, что приводило к медленной прокрутке.
Чтобы
overflow
имел эффект, контейнер уровня блока должен иметь либо заданную высоту ( height
или max-height
), либо пробел
, установленный на nowrap
.
Установка для одной оси значения
visible
(по умолчанию) и установка для другой оси другого значения приводит к тому, что visible
ведет себя как auto
.
Свойство JavaScript
Element.scrollTop
может использоваться для прокрутки элемента HTML, даже если переполнение
устанавливается на скрытое
.
тип анимации0026
Initial value | visible |
---|---|
Applies to | Block-containers, flex containers, and grid containers |
Inherited | no |
Computed value | as each of the свойства сокращения:
|
дискретный |
переполнение =
[ видимый | скрытый | клип | прокрутить | auto ]{1,2}
Установка различных значений переполнения для текста
HTML
видимый
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
долоремке лаудантиум.
<дел>
скрытый
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
долоремке лаудантиум.