Css вертикальная прокрутка: overflow-y | htmlbook.ru

Leave a Comment / Css / By /

Содержание

Переполнение — Tailwind CSS

​Основы использования

​Отображение содержимого, которое выходит за пределы

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

Andrew Alfred Technical advisor

<div></div>

​Скрытие переполняющегося содержимого

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

Andrew Alfred Technical advisor

<div></div>

​Прокрутка при необходимости

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

Andrew Alfred Technical advisor

Debra Houston Analyst

Jane White Director, Marketing

Ray Flint Technical Advisor

<div></div>

​Скролл по горизонтали при необходимости

Используйте overflow-x-auto, чтобы разрешить горизонтальную прокрутку, если это необходимо.

Andrew

Emily

Whitney

David

Kristin

Sarah

<div></div>

​Скролл по вертикали при необходимости

Используйте overflow-y-auto, чтобы разрешить вертикальную прокрутку, если это необходимо.

Andrew Alfred Technical advisor

Debra Houston Analyst

Jane White Director, Marketing

Ray Flint Technical Advisor

<div></div>

​Скролл по горизонтали всегда

Используйте overflow-x-scroll, чтобы разрешить горизонтальную прокрутку и всегда показывать полосы прокрутки, если операционная система не отключила всегда видимые полосы прокрутки.

<div></div>

​Скролл по вертикали всегда

Используйте overflow-y-scroll, чтобы разрешить вертикальную прокрутку и всегда показывать полосы прокрутки, если операционная система не отключила всегда видимые полосы прокрутки.

<div></div>

​Скролл во всех направлениях

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

<div></div>

​Применяя условно

​Наведение, фокус и другие состояния

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:overflow-scroll to only apply the overflow-scroll utility on hover.

<div>
  <!-- ... -->
</div>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

​Контрольные точки и медиа-запросы

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:overflow-scroll to apply the overflow-scroll utility at only medium screen sizes and above.

<div>
  <!-- ... -->
</div>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.

Отслеживание прокрутки. Компоненты · Bootstrap v5.0.2

Как это работает

У отслеживания прокрутки есть несколько требований для правильной работы:

  • Он должен использоваться в Bootstrap компонент навигации или группа списка.
  • Отслеживание прокрутки требует position: relative; на элементе, за которым Вы шпионите, обычно это <body>.
  • Якоря (<a>) обязательны и должны указывать на элемент с этим id.

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

Пример на панели навигации

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

<nav>
  <a href="#">Панель навигации</a>
  <ul>
    <li>
      <a href="#scrollspyHeading1">Первый</a>
    </li>
    <li>
      <a href="#scrollspyHeading2">Второй</a>
    </li>
    <li>
      <a data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Выпадающий список</a>
      <ul>
        <li><a href="#scrollspyHeading3">Третий</a></li>
        <li><a href="#scrollspyHeading4">Четвертый</a></li>
        <li><hr></li>
        <li><a href="#scrollspyHeading5">Пятый</a></li>
      </ul>
    </li>
  </ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="0">
  <h5>Первый заголовок</h5>
  <p>.
  ..</p>
  <h5>Второй заголовок</h5>
  <p>...</p>
  <h5>Третий заголовок</h5>
  <p>...</p>
  <h5>Четвертый заголовок</h5>
  <p>...</p>
  <h5>Пятый заголовок</h5>
  <p>...</p>
</div>

Пример с вложенной навигацией

Отслеживание прокрутки также работает с вложенными

.nav. Если вложенный .nav имеет значение .active, его родители также будут .active. Прокрутите область рядом с панелью навигации и посмотрите, как меняется активный класс.

<nav>
  <a href="#">Панель навигации</a>
  <nav>
    <a href="#item-1">Элемент 1</a>
    <nav>
      <a href="#item-1-1">Элемент 1-1</a>
      <a href="#item-1-2">Элемент 1-2</a>
    </nav>
    <a href="#item-2">Элемент 2</a>
    <a href="#item-3">Элемент 3</a>
    <nav>
      <a href="#item-3-1">Элемент 3-1</a>
      <a href="#item-3-2">Элемент 3-2</a>
    </nav>
  </nav>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
  <h5>Элемент 1</h5>
  <p>.
  ..</p>
  <h5>Элемент 1-1</h5>
  <p>...</p>
  <h5>Элемент 1-2</h5>
  <p>...</p>
  <h5>Элемент 2</h5>
  <p>...</p>
  <h5>Элемент 3</h5>
  <p>...</p>
  <h5>Элемент 3-1</h5>
  <p>...</p>
  <h5>Элемент 3-2</h5>
  <p>...</p>
</div>

Пример со списком-группой

Отслеживание прокрутки также работает с .list-group. Прокрутите область рядом с группой списка и посмотрите, как меняется активный класс.

Элемент 1 Элемент 2 Элемент 3 Элемент 4 

<div>
  <a href="#list-item-1">Элемент 1</a>
  <a href="#list-item-2">Элемент 2</a>
  <a href="#list-item-3">Элемент 3</a>
  <a href="#list-item-4">Элемент 4</a>
</div>
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" tabindex="0">
  <h5>Элемент 1</h5>
  <p>.
 
 
 ..</p>
  <h5>Элемент 2</h5>
  <p>...</p>
  <h5>Элемент 3</h5>
  <p>...</p>
  <h5>Элемент 4</h5>
  <p>...</p>
</div>

Использование

Через атрибуты данных

Чтобы легко добавить поведение прокрутки к Вашей навигации на верхней панели, добавьте data-bs-spy="scroll" к элементу, за которым Вы хотите следить (чаще всего это <body>). Затем добавьте атрибут data-bs-target с идентификатором или классом родительского элемента любого компонента Bootstrap

.nav.

body {
  position: relative;
}

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
  ...
  <div>
    <ul role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Через JavaScript

После добавления position: relative; в Ваш CSS вызовите scrollspy через JavaScript:

var scrollSpy = new bootstrap. ScrollSpy(document.body, {
  target: '#navbar-example'
})
Требуются разрешаемые цели Идентификатора

Ссылки навигационной панели должны иметь разрешаемые идентификаторы. Например, <a href="#home">home</a> должен соответствовать чему-то в DOM, например, <div></div>.

Методы

refresh

При использовании отслеживания прокрутки в сочетании с добавлением или удалением элементов из DOM Вам необходимо вызвать метод обновления следующим образом:

var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
  bootstrap.ScrollSpy.getInstance(dataSpyEl)
    .refresh()
})
dispose

Уничтожает отслеживание прокрутки элемента. (Удаляет сохраненные данные в элементе DOM)

getInstance

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

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

Параметры

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data-bs-, как в data-bs-offset=""

.

Наименование Тип По умочланию Описание
offset number 10 Пиксели для смещения сверху при вычислении положения прокрутки.
method string auto Находит, в каком разделе находится отслеживаемый элемент. auto выберет лучший метод для получения координат прокрутки. offset будет использовать Element.getBoundingClientRect() для получения координат прокрутки. position будет использовать HTMLElement.offsetTop and HTMLElement.offsetLeft свойства для получения координат прокрутки.
target
 string | jQuery object | DOM element Определяет элемент для применения подключаемого модуля Отслеживания прокрутки.

События

Тип события Описание
activate.bs.scrollspy Это событие запускается в элементе прокрутки всякий раз, когда новый элемент активируется отслеживанием прокрутки. 
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate. bs.scrollspy', function () {
  // сделайте что-нибудь...
})

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

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


Пример

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

div.ex1 {
 overflow-y: прокрутка;
}

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

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

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

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

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

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

Совет: Используйте свойство overflow-x для определения отсечения по левому и правому краям.

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

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

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

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

Цифры, за которыми следует -ms-, указывают первую версию, которая работала с префикс.

Собственность
перелив-у 4,0 9,0
8,0 -мс-		 1,5 3,0 9,5

Синтаксис CSS

overflow-y: visible|hidden|scroll|auto|initial|inherit;

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

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

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

Учебник CSS: CSS Overflow

Ссылка HTML DOM: свойство overflowY

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


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по 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

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

FORUM | О

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

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

css — Почему вертикальная полоса прокрутки прикрепляется к HTML, когда переполнение: прокрутка назначается телу?

Задай вопрос

спросил

Изменено 2 года, 5 месяцев назад

Просмотрено 329 раз

Если вы запустите следующий код, вы увидите, что вертикальная полоса прокрутки прикрепляется к html, а не к телу, как я ожидаю. Я ожидаю, что потому, что высота body определена как 800 пикселей, а высота div.a равна 1500 пикселей. Итак, с переполнением: прокрутите тело, полоса прокрутки должна появиться в теле, а не в html. Кто-нибудь может пролить свет на это?

 HTML {
  фон: черный;
  поле: 20 пикселей;
}

тело {
  фон: красный;
  заполнение: 0;
  маржа: 0;
  высота: 800 пикселей;
  переполнение: прокрутка;
}

.а {
  ширина: 500 пикселей;
  высота: 1500 пикселей;
  фон: желтый;
}

.б {
  ширина: 500 пикселей;
  высота: 1000 пикселей;
  фон: синий;
} 
 <дел>
  <дел>
  • HTML
  • CSS

1

Мне удалось заставить это работать, указав html не показывать переполнение. Перекладывание бремени на своего ребенка, чтобы справиться с ним.

 * {
 положение: родственник;
 box-sizing: граница-коробка;
 }
 HTML {
 фон: черный;
 поле: 20 пикселей;
 переполнение: скрыто;
 }
 тело {
 ширина: 400 пикселей;
 высота: 100%;
 максимальная высота: 200 пикселей;
 фон: красный;
 отступ: 20 пикселей;
 поле: 0 авто;
 переполнение-у: прокрутка;
 }
 .