Html скролл – Скролл-эффекты. Разновидности, тонкости, проблемы, решения. Что такое Scroolly? — Вебджем.рф

Содержание

Атрибут scroll | HTML | WebReference

Атрибут scroll управляет присутствием полос прокрутки в окне браузера, когда содержание веб-страницы превышает размер текущего окна.

Это устаревший атрибут, взамен него используйте стили.

Синтаксис

<body scroll="yes | no">
...
</body>

Значения

yes: Отображает полосы прокрутки.
no: Запрещает показ полос прокрутки в окне.

Значение по умолчанию

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>BODY, атрибут scroll</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body scroll="no">

  <table><tr><td></td></tr></table>

 </body>
</html>

Примечание

Для запрета полос прокрутки используйте стилевое свойство overflow со значением hidden, применяя его к селектору body.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Полосы прокрутки</title>
  <style>
   body {
     overflow: hidden;
   }
  </style>
 </head>
 <body>
  <p></p>
 </body>
</html>

Браузеры

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

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

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 19.03.2018

Редакторы: Влад Мержевич

Атрибут scrolling | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+
Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1
Описание

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

Синтаксис

<iframe scrolling="auto | no | yes">...</iframe>

Значения

auto

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

no

Запрещает отображение полос прокрутки.

yes

Всегда вызывает появление полос прокрутки, независимо от объема информации.

Значение по умолчанию

auto

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег IFRAME, атрибут scrolling</title> </head> <body> <iframe src="tip.html" scrolling="no"></iframe> </body> </html>
Атрибут scrolling | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
3.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+
Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1
Описание

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

Синтаксис

<frame scrolling="auto | no | yes">

Значения

auto

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

no

Запрещает отображение полос прокрутки.

yes

Всегда вызывает появление полос прокрутки, независимо от объема информации.

Значение по умолчанию

auto

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег FRAME, атрибут scrolling</title> </head> <frameset cols="100,*"> <frame src="left.html" name="leftFrame" noresize scrolling="no"> <frame src="main.html" name="mainFrame"> </frameset> </html>
синтаксис, применение свойств и поддержка браузерами

От автора: веб-разработчикам сложно гарантировать хороший UX при прокручивании страницы, но, к счастью, CSS модуль «Scroll Snap» должен помочь в этом. Модуль принудительно устанавливает конечную позицию скрола после выполнения прокрутки. Помимо всего прочего, в модуле есть функции управления, такие как панорамирование в сочетании с «привязками». Модуль CSS Scroll Snap обеспечивает выравнивание контента внутри контейнера со скролом. Недавно W3C выпустили Scroll Snap как Candidate Recommendation с хорошо продуманными реализациями и примерами, а также с обновленным синтаксисом. Давайте разбираться.

Терминология Scroll Snap

Чтобы понять мощь Scroll Snap и принцип его работы, необходимо знать его терминологию. Это также поможет избежать недопонимания при использовании терминов в этой статье.

Scroll snap проходит внутри snapport или scrollport. Оба термина значат одно и то же, их можно заменить на контейнер скрола. Это область, в которой проходит scroll snap, как видно на рисунке выше (внешняя прерывистая рамка). Ее цель – принудительно установить позицию завершения для scrollport внутри контейнера после завершения операции.

Каждый элемент snapport называется snap area и является объектом (-ми), которые нам и нужны. В каждой snap area есть snap position, которое также определяется через snap position контейнера и представляет собой линию из красных точек на рисунке выше.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее
Мы разобрались в терминах, теперь давайте рассмотрим пару примеров и узнаем, как они работают в реальной жизни. Более подробно о случаях использования можно узнать в примере W3C с фотогалереей и демо, а также по ссылке. Также обновилась спецификация Modules August 2017 CR. В :target должны заложить довольно интересное поведение.

Демо Scroll Snap

На момент написания статьи демо ниже лучше всего просматривать в Safari 11. Другие браузеры не полностью поддерживают новый синтаксис, несмотря на данные с caniuse и личные тесты.

Пример ниже показывает только минимум необходимых свойств для включения CSS Scroll Snap. В нем нет полифилов, мне не удалось найти рабочий polyfill, который бы работал с последним опубликованным синтаксисом. Также любой скрол контейнер потребует еще одно известное CSS свойство overflow.

Демо выше использует ось У в качестве snap position. Однако можно и использовать ось Х. Если у вас не установлен Safari 11, ниже представлена запись демо.

Панели аккуратно переключаются. Обратите внимание, на странице есть определенная точка, в которой импульс прокрутки берет верх и перепрыгивает к следующему блоку. Быстро, да? Второе демо, где ось У используется для показа галереи изображений.

По мере прокрутки по горизонтали импульс достигает точки невозврата scrollport и snap area, независимо от размера изображения.

Свойства и синтаксис scroll snap

Перейдем к объяснению свойств, их синтаксиса и значений.

В текущей спецификации scroll snap всего 4 свойства, и каждое играет важную роль. Эти 4 свойства…

scroll-snap-type

scroll-snap-align

scroll-padding

scroll-margin

Разберем каждое свойство, как оно работает, где определяется и какие значения принимает.

scroll-snap-type

Это свойство определяет тип контейнера — scroll snap container или snapport – строгость переключения, а также используемую ось. Если строгое значение не задано, по умолчанию передается proximity. Свойство также принимает другое значение, помогающее в определении snap axis. Можно передать 2 значения (например, scroll-snap-type: y mandatory). В таком случае snap-type касается только оси У и имеет значение mandatory.

Scroll Snap Axis: x, y, block, inline или both

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
x: скрол контейнер фиксирует snap position только по горизонтальной оси

y: скрол контейнер фиксирует snap position только по вертикальной оси

block: скрол контейнер фиксирует snap position только по оси блока

inline: скрол контейнер фиксирует snap position только по инлайн оси

both: скрол контейнер фиксирует snap position по обеим осям независимо (потенциально привязываясь к разным элементам каждой оси)

Scroll Snap Strictness: none, proximity и mandatory

none: если задан на скрол контейнере, то скрол контейнер не переключается

proximity: если задан на скрол контейнере, то скрол контейнер должен быть привязан к snap position, в которой нет активных операций прокрутки. Если доступная snap position существует, тогда скрол контейнер должен переключиться по завершении прокрутки (если позиции нет, переключения не будет)

mandatory: если задан на скрол контейнере, скрол контейнер может привязываться к snap position в момент завершения прокрутки

scroll-snap-align

Свойство scroll-snap-align задает snap position контейнера, как выравнивание его snap area (как объект выравнивания) внутри snapport контейнера (как контейнер выравнивания). Два значения определяют выравнивание привязки по инлайн оси и блоковой оси соответственно. Если задано одно значение, второе значение по умолчанию дублируется. Принимаемые значения none, center, start и end.

Это свойство определяется для дочерних элементов скрол контейнера и принимает 2 значения. Первое значение – ось Х, второе – ось У. Например, scroll-snap-align: start center.

None: такой блок не определяет snap position по заданной оси.

Start: начальное выравнивание snap area скрола блока внутри snapport контейнера – это snap position по заданной оси

End: конечное выравнивание snap area скрола блока внутри snapport контейнера – это snap position по заданной оси

Center: центральное выравнивание snap area скрола блока внутри snapport контейнера – это snap position по заданной оси

scroll-padding

Значения scroll-padding ведут себя как сдвиги. Когда они определены, у контейнера уменьшается прокручиваемая область, считающаяся видимой. Свойство не влияет на макет, область скрола, начальное положение и на видимость элемента. Существует 2 формы: первая похожа на стандартное свойство padding, и длинная версия scroll-padding-top и scroll-padding-bottom, например.

scroll-margin

Эти значения представляют собой внешние выражения, объявленные для скрол контейнера, которые определяют snap area, используемую для привязки элементов к snapport. Работает как свойство margin, как сокращенная так и длинная версия scroll-margin-top и scroll-margin-bottom.

Заключительные мысли

Последние обновления в editor’s draft привели к ухудшению поддержки, на данный момент, как я уже говорил, нет рабочих полифилов. Есть вероятность того, что свойство scroll-snap-stop будет удалено в CR. Я также выяснил, что min-height сейчас не работает, когда задано на scroll snap контейнере. Может, есть другие свойства со схожим действием. Если знаете такие, оставляйте их в комментариях.

Это беглый обзор CSS Scroll snap. Стоит оно того? Будет он вам полезен? Или его нужно поместить в самые темные уголки галактики, где его никто не найдет? Оставляйте ответы в комментариях. И как всегда, хорошо покодить!

Автор: Dennis Gaebel

Источник: https://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML

Практика верстки сайта на CSS Grid с нуля
Смотреть
scroll-behavior | CSS | WebReference

Определяет поведение прокрутки внутри элемента — плавная прокрутка или мгновенный переход.
Краткая информация
Значение по умолчанию auto
Наследуется Нет
Применяется К блоку с прокруткой
Анимируется Нет
Синтаксис ?

scroll-behavior: auto | smooth

Обозначения
Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#
×
Значения
auto
Переход к элементу внутри блока с прокруткой происходит мгновенно.
smooth
Прокрутка происходит плавно. Время и функция перехода устанавливаются непосредственно браузером.
Объектная модель
Объект.style.scrollBehavior
Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.
×
Браузеры
В таблице браузеров применяются следующие обозначения.
— свойство полностью поддерживается браузером со всеми допустимыми значениями;
— свойство браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
×
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 11.01.2019
Редакторы: Влад Мержевич

Html скролл – Скролл-эффекты. Разновидности, тонкости, проблемы, решения. Что такое Scroolly?

Атрибут scroll | HTML | WebReference

Синтаксис

Значения

Значение по умолчанию

Пример

Примечание

Браузеры

Автор и редакторы

Атрибут scrolling | htmlbook.ru

Спецификация

Описание

Синтаксис

Значения

Значение по умолчанию

Атрибут scrolling | htmlbook.ru

Спецификация

Описание

Синтаксис

Значения

Значение по умолчанию

синтаксис, применение свойств и поддержка браузерами

Терминология Scroll Snap

Демо Scroll Snap

Свойства и синтаксис scroll snap

Заключительные мысли

PSD to HTML

scroll-behavior | CSS | WebReference

Краткая информация

Синтаксис ?

Обозначения

Значения

Объектная модель

Спецификация ?

Спецификация

Браузеры

Автор и редакторы

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

Рубрики

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
4.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Значение по умолчанию	auto
Наследуется	Нет
Применяется	К блоку с прокруткой
Анимируется	Нет

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#