Css скролл: Базовые концепции CSS Scroll Snap — CSS

28.06.2023 alexxlab

Содержание

overflow — CSS | MDN

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

Использование свойства overflow со значениями, отличными от visible, (значение, принятое по умолчанию), создаёт новый блочный контекст форматирования (en-US). Это технически необходимо, поскольку если бы float пересекался с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг вторгающихся float’ов. Обтекание при этом было бы необходимо производить после каждого шага прокрутки заново, что привело бы к заметному замедлению прокрутки. Обратите внимание, что при программной установке атрибута scrollTop для соответствующего HTML-элемента, даже если overflow имеет значение hidden, элемент, возможно, придётся прокрутить.

Начальное значение	`visible`
Применяется к	Block-containers, flex containers, and grid containers
Наследуется	нет
Обработка значения	как и у каждого из подсвойств этого свойства: `overflow-x` (en-US): as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of `overflow-x` (en-US) or `overflow-y` (en-US) is neither `visible` nor clip `overflow-y` (en-US): as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of `overflow-x` (en-US) or `overflow-y` (en-US) is neither `visible` nor clip
Animation type	discrete

Формат синтаксиса (en-US):

overflow = 
[ (en-US) visible | (en-US) hidden | (en-US) clip | (en-US) scroll | (en-US) auto ] (en-US){1,2} (en-US)

overflow: visible
overflow: hidden
overflow: scroll
overflow: auto
overflow: inherit

Значения

visible: По умолчанию. Содержимое не обрезается, может отображаться снаружи блока, в котором оно расположено.
hidden: Контент обрезается, без предоставления прокрутки.
scroll: Содержимое обрезается и браузер использует элементы прокрутки, не важно было ли обрезано содержимое или нет. Это избегает многих проблем касательно появления прокруток и их исчезновения в динамичной среде. Принтеры могут печатать переполненное содержимое.
auto: Зависит от агента пользователя. Браузеры такие как Firefox предоставляют прокрутку, если содержимое переполняет блок.

Расширения Mozilla

-moz-scrollbars-none: Используйте overflow:hidden.
-moz-scrollbars-horizontal Устарело: Использование overflow-x (en-US) и overflow-y (en-US) предпочтительнее.
-moz-scrollbars-vertical Устарело: Использование overflow-x (en-US) и overflow-y (en-US) предпочтительнее.
-moz-hidden-unscrollable Non-standard: Главным образом предназначен для внутреннего использования и для тем. Отключает прокрутку XML root элементов и <html>, <body> клавишами со стрелками и колесом мыши.

p {
     width: 12em;
     height: 6em;
     border: dotted;
     overflow: visible; /* содержимое не обрезается */
}

visible (default) Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: hidden; /* полосы прокрутки не предоставляются */ }

overflow: hidden Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: scroll; /* всегда показывать полосы прокрутки */ }

overflow: scroll Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

p { overflow: auto; /* добавить полосы прокрутки, если это необходимо */ }

overflow: auto Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Спецификация	Статус	Комментарий
CSS Overflow Module Level 3 Определение ‘overflow’ в этой спецификации.	Рабочий черновик	Changed syntax to allow one or two keywords instead of only one
CSS Box Model Определение ‘overflow’ в этой спецификации.	Кандидат в рекомендации	Без изменений
CSS Level 2 (Revision 1) Определение ‘overflow’ в этой спецификации.	Рекомендация	Initial definition.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Firefox (Gecko) Примечания

Из-за Firefox 3.6 (Gecko 1.9.2), свойство overflow неверно применяется к элементам table-group (<thead> , <tbody> , <tfoot>). Это поведение будет исправлено в следующих версиях.

Internet Explorer Примечания

Internet Explorer 4 — 6 увеличивает элемент с overflow:visible (значение по умолчанию), чтобы заполнить содержимое в нём. height/width действуют подобно min-height/min-width.

Связанные свойства CSS: text-overflow (en-US), white-space, overflow-x (en-US), overflow-y (en-US), overflow-inline (en-US), overflow-block, clip (en-US), display

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 17 февр. 2023 г. by MDN contributors.

Базовые концепции CSS Scroll Snap — CSS

Спецификация CSS Scroll Snap даёт нам возможность реализовывать прокрутку документа с привязкой к определённым точкам. Это может быть полезно в создании интерфейса, по своей работе больше похожего на мобильное приложение.

Ключевыми свойствами спецификации Scroll Snap являются scroll-snap-type и scroll-snap-align (en-US). Свойство scroll-snap-type применяется к скролл-контейнеру для определения типа и направления прокрутки.

Свойство scroll-snap-align нужно применять к дочерним элементам, чтобы указать позицию, к которой будет привязана прокрутка. Пример ниже демонстрирует прокрутку с привязкой вдоль оси y, а свойство scroll-snap-align применяется для элемента «section», чтобы задать точку, на которой прокрутка должна остановиться.

Свойство scroll-snap-type необходимо, чтобы задавать направление, в котором будет происходить привязка прокрутки. Значением свойства может быть x, y, или соответствующие логические block или inline. Также можно использовать ключевое слово both, чтобы привязка работала в обоих направлениях.

Также можно передавать ключевые слова mandatory, или proximity. Ключевое слово mandatory определяет обязательное смещение прокрутки браузера к ближайшей точке привязки. Ключевое слово proximity означает, что привязка может произойти , но не обязательно.

Использование mandatory делает взаимодействие с интерфейсом однородным и предсказуемым — вы знаете, что браузер всегда будет смещать область видимости к каждой заданной точке привязки. Это даёт уверенность в том, что в после прокрутки экрана, в его верхней части окажется именно то, что вы и ожидаете там увидеть.Однако, это может привести и к проблемам, если содержимое слишком большое по высоте — пользователи могут оказаться в очень неприятной ситуации, не имея возможности переместиться к определённому месту на странице странице. Следовательно, применение mandatory должно быть тщательно продуманным и использовано только в тех ситуациях, когда вы точно знаете, какое количество содержимого будет на экране в каждый момент времени.

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

Свойство scroll-snap-align (en-US) может принимать значения start, end, или center, обозначающие, какую сторону контейнера прижимать к дочернему элементу. В примере ниже вы можете изменить значение scroll-snap-align, чтобы увидеть, как это повлияет на работу прокрутки.

Если вы не хотите, чтобы содержимое вплотную прилегало к краю прокручиваемого контейнера, можете воспользоваться сокращённым свойством scroll-padding (en-US) или альтернативными ему более конкретными свойствами scroll-padding-*, чтобы задать для прокрутки внутренние отступы с каждой стороны контейнера.

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

Это может быть полезно в ситуации, когда у вас есть фиксированно позиционированный элемент. Например, панель навигации, которая может перекрывать содержимое. С помощью scroll-padding вы можете оставить место для панели, как это сделано в примере ниже, где <h2> остаётся на экране, а содержимое при прокрутке оказывается под панелью. Без отступов шапка перекроет некоторую часть содержимого, когда произойдёт смещение к привязанной точке.

Свойство scroll-margin (en-US) может быть задано для дочерних элементов и определяет, по сути, внешний отступ данного элемента до позиции прокрутки. Это позволяет дочерним элементам занимать разное количество места, и может использоваться в сочетании со свойством scroll-padding для родителя. Опробуйте его в примере ниже

Свойство scroll-snap-stop (en-US) сообщает браузеру, обязательно ли ему останавливаться на каждой точке привязки дочерних элементов (это значит, что в примере выше мы бы останавливались в начале каждой секции) или допускается возможность пропускать их. Это свойство реализовано в меньшем количестве браузеров, чем другие свойства из данной спецификации.

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

Примечание: на данный момент свойство scroll-snap-stop помечено рискованным для использования в данной версии спецификации, следовательно может быть вообще удалено.

На страницах каждого свойства Scroll Snap содержатся подробности поддержки браузерами. Обратите внимание, что до версии 68, в браузере Firefox была реализована поддержка старой версии спецификации. Читайте следующее руководство (en-US), чтобы узнать, как писать код, который будет поддерживаться всеми браузерами.

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 000Z»>7 нояб. 2022 г. by MDN contributors.

javascript — прокрутка CSS с верхним переполнением

спросил 2 года, 2 месяца назад

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

Просмотрено 2к раз

Я пытаюсь сделать так, чтобы элементы div, содержащие короткие текстовые строки, появлялись (используя JS) в середине пустой страницы, при этом новые элементы всегда центрировались, а старые элементы перемещались вверх (аналогично тому, как будет выглядеть сеанс консоли или терминала). Элементы, которые исчезают в верхней части страницы, следует просматривать, прокручивая вверх (т. е. назад во времени).

Следующий код работает, но полосы прокрутки не появляются. Почему это?

HTML

 #словарь {
  положение: фиксированное;
  переполнение: прокрутка;
  поле: 0 авто;
  низ: 50%;
  слева: 40%;
  выравнивание текста: по левому краю;
}
. слово {
  // Просто шрифт и цвет
}

 <тело>
  <дел>
    что угодно
    что угодно
    что угодно
    что угодно

JavaScript
HTML
CSS

Попробуйте это.

Добавьте max-height к div . Это гарантирует, что высота div не должна превышать максимальную высоту . Затем добавьте overflow: auto . Это гарантирует, что когда высота превысит максимальную высоту , должны появиться полосы прокрутки.

переполнение: авто; работает для обоих ширина и высота

. Если вы хотите указать, вы всегда можете использовать overflow-y: auto; .

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

 #словарь {
  положение: фиксированное;
  переполнение: авто;
  поле: 0 авто;
  максимальная высота: 100 пикселей;
  низ: 50%;
  слева: 40%;
  выравнивание текста: по левому краю;
}
.слово {
  // Просто шрифт и цвет
}

 <тело>
  <дел>
    что угодно
    что угодно
    что угодно
    что угодно
     что угодно
    что угодно
    что угодно
    что угодно
    что угодно

Попробуйте изменить переполнение : auto

Пример этого можно найти здесь
https://webdesign.tutsplus.com/tutorials/how-to-hide-reveal-a-sticky-header-on-scroll- with-javascript—cms-33756

Просто добавьте высоту в свой #wordlist div.

Мне кажется, вам не хватает свойства CSS «высота». Упоминание соответствующего значения пикселя в качестве высоты и реализация метода «scrollTop()» для идентификатора контейнера до его высоты поможет отобразить полосу прокрутки внизу.

 $("#wordlist").scrollTop($('#wordlist').height())

 #wordlist {
  положение: фиксированное;
  переполнение-у: прокрутка;
  поле: 0 авто;
  низ: 50%;
  слева: 40%;
  высота: 100 пикселей;
  выравнивание текста: по левому краю;
}
.слово {
  // Просто шрифт и цвет
}

  <тело>
  <дел>
    что угодно
    что угодно
    что угодно
    что угодно
    что угодно
    что угодно
    Последнее значение

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

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

html — Как включить прокрутку CSS по осям X и Y

спросил 1 год, 8 месяцев назад

Изменено 1 год, 8 месяцев назад

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

Я искал несколько часов, но не нашел ответа, поэтому мне нужна помощь

Существует элемент div, обеспечивающий прокрутку-x

 
   <дел>
   <дел>
   <дел>

Когда мой курсор мыши находится в этой области div, прокрутка y не работает

Пробовал =>

 #id overflow: auto
#id переполнение-x: авто, переполнение-y: авто
#id переполнение-x: прокрутка, переполнение-y: прокрутка

Как решить?

HTML
CSS

Вот это может дать вам некоторое представление:

 #el1, #el2, #el3 {
  ширина: 200 пикселей;
  высота: 200 пикселей;
  фон: голубой;
  дисплей: встроенный блок;
}
. родитель {
  ширина: 100 пикселей;
  высота: 100 пикселей;
  граница: 2 пикселя пунктирная серая;
  переполнение: авто;
}

 <дел>
   а
   б
   с

Этот фрагмент работает так, как вы хотите?

Ключ в настройке высоты и ширины ваших родительских и дочерних элементов.

Горизонтальная прокрутка (ось X) может быть достигнута, если общая ширина дочерних элементов больше, чем ширина родительского элемента плюс использование overflow: auto для родительского элемента.

Вертикальная прокрутка (ось Y) может быть достигнута, если общая высота дочерних элементов больше, чем высота родительского элемента плюс использование переполнения : auto для родительского элемента.

Вот рабочий код: https://codesandbox.io/s/kind-gates-djhnx?file=/src/styles.css

HTML-файл:

<дел> Lorem Ipsum - это просто фиктивный текст печати и набора текста. промышленность. Lorem Ipsum всегда был стандартным фиктивным текстом в отрасли.
с 1500-х годов, когда неизвестный печатник взял камбуз шрифтов и
скремблировал его, чтобы сделать книгу типовых образцов. Он пережил не только пять
веков, но и скачок в электронную верстку, оставаясь
принципиально без изменений. Он был популярен в 1960-е годы с выпуском
листов Letraset, содержащих отрывки Lorem Ipsum, а совсем недавно
с программным обеспечением для настольных издательских систем, таким как Aldus PageMaker, включая версии
Лорем Ипсум. <дел> Lorem Ipsum - это просто фиктивный текст печати и набора текста.
промышленность. Lorem Ipsum всегда был стандартным фиктивным текстом в отрасли.
с 1500-х годов, когда неизвестный печатник взял камбуз шрифтов и
скремблировал его, чтобы сделать книгу типовых образцов. Он пережил не только пять
веков, но и скачок в электронную верстку, оставаясь
принципиально без изменений. Он был популярен в 1960-е годы с выпуском
листов Letraset, содержащих отрывки Lorem Ipsum, а совсем недавно
с программным обеспечением для настольных издательских систем, таким как Aldus PageMaker, включая версии
Лорем Ипсум.

Css скролл: Базовые концепции CSS Scroll Snap — CSS

overflow — CSS | MDN

Значения

Расширения Mozilla

Firefox (Gecko) Примечания

Internet Explorer Примечания

Found a content problem with this page?

Базовые концепции CSS Scroll Snap — CSS

Found a content problem with this page?

javascript — прокрутка CSS с верхним переполнением

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

Опубликовать как гость

Опубликовать как гость

html — Как включить прокрутку CSS по осям X и Y

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