Css прокрутка: text-overflow | htmlbook.ru

15.04.2023 alexxlab

Содержание

scroll-behavior — CSS — Дока

Кратко
Пример
Как понять
Как пишется
Подсказки
На практике
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

ctrl + alt + ←

→

scroll-padding

ctrl + alt + →

Как добавить отступ к прокрутке (html, css)

Вопрос задан 6 месяцев назад

Изменён 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

Предлагаю использовать 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>

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

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

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

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

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

Почта

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

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

Почта

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

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

Свойство CSS scroll-behavior

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

Пример

Добавьте к документу эффект плавной прокрутки:

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 Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.

CSS Reference
Bootstrap Reference
PHP 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, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

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 свойства сокращения: `overflow-x` : как указано, за исключением `visible` / `clip` вычисление до `auto` / `hidden` соответственно, если один из `overflow-x` или `overflow-y` не является ни `visible` , ни clip `overflow-y` / 9001 9001 : как указано, кроме видимого 9001 9001 clip вычисление `auto` / `hidden` соответственно, если один из `overflow-x` или `overflow-y` не является ни `visible` , ни clip
дискретный

 переполнение = 
 [ видимый | скрытый | клип | прокрутить | 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
    долоремке лаудантиум.


<дел>
прокрутить

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
долоремке лаудантиум.


<дел>
авто

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
долоремке лаудантиум.


 CSS 
 корпус {
  дисплей: гибкий;
  выравнивание содержимого: пространство вокруг;
}
дел {
  поле: 1em;
  размер шрифта: 1.2em;
}
п {
  ширина: 8em;
  высота: 5см;
  граница: пунктирная;
}
стр. видимый {
  переполнение: видимое;
}
п.скрытый {
  переполнение: скрыто;
}
p.scroll {
  переполнение: прокрутка;
}
п.авто {
  переполнение: авто;
}
 
 Результат 
 Проблемы доступности 
 Область прокручиваемого содержимого не может быть прокручена пользователем, использующим только клавиатуру, за исключением пользователей Firefox (что делает клавиатуру контейнера по умолчанию фокусируемой).
 Как разработчик, чтобы позволить пользователям, не использующим только клавиатуру Firefox, прокручивать контейнер, вам нужно будет указать ему  tabindex , используя  tabindex="0"  . К сожалению, когда программа чтения с экрана встречает эту табуляцию, у нее не будет контекста, что это такое, и программа чтения с экрана, скорее всего, объявит все ее содержимое. Дайте ему соответствующую роль WAI-ARIA (например,  role="region" ) и доступное имя (через  aria-label  или  aria-labeledby 9).0020 ) может смягчить это.
 Области прокрутки только с клавиатуры
 Спецификация
 CSS Overflow Module Level 3 
  # propdef-overflow 
 B 900 загрузка только таблиц в браузере CD с поддержкой JavaScript. Включите JavaScript для просмотра данных.
 Связанные свойства CSS:  text-overflow  ,  white-space  ,  overflow-x  ,  overflow-y  ,  встроенный перелив  ,  блок переполнения  ,  зажим  ,  дисплей 
 Переполнение CSS и прокручиваемое переполнение отладки
 Обнаружили проблему с содержанием этой страницы? 
 Отредактируйте страницу на GitHub.

Css прокрутка: text-overflow | htmlbook.ru

scroll-behavior — CSS — Дока

Кратко

Пример

Как понять

Как пишется

Подсказки

На практике

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

Как добавить отступ к прокрутке (html, css)

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

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

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

Свойство CSS scroll-behavior

Пример

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

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

Синтаксис CSS

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

ВЫБОР ЦВЕТА

Лучшие учебники

Основные ссылки

overflow — CSS: каскадные таблицы стилей

Значения

Расширения Mozilla

Установка различных значений переполнения для текста

HTML

CSS

Результат

Проблемы доступности

Обнаружили проблему с содержанием этой страницы?

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

`Установка различных значений переполнения для текста`

`HTML`

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