Более простая реализация скроллинга с помощью CSS position: sticky

Более простая реализация скроллинга с помощью CSS position: sticky

От автора: мы много писали о скроллинге здесь на The Pudding. Мы рассмотрели все, начиная со сравнения библиотек и заканчивая адаптивными передовыми методами и глубоким рассмотрением Scrollama. Но всегда есть место для улучшения. Одной из самых заметных попыток реализации прокрутки является липкий графический шаблон, благодаря которому графический элемент сначала «застывает» на несколько этапов прокрутки, а затем переходит к другому состоянию. В этом посте мы сосредоточимся на самом простом решении, которое мы придумали, с использованием CSS position sticky.

Зачем использовать Sticky?

Короткая версия: при использовании липкого графического шаблона вам понадобится куча JavaScript для обработки застрявшего состояния, размеров и т. д. При таком подходе все это делается с минимальным CSS. Это означает меньше ошибок, меньше обслуживания и больше счастья.

Что такое Sticky?

Липкое позиционирование — это ребенок любви position: relative и position: fixed (при этом этот ребенок вырос во что-то большее и лучшее, сохраняя при этом качества своих родителей). Элемент, к которому применено position: sticky остается фиксированным в документе до тех пор, пока не будет достигнут определенный порог, а затем он будет прикреплен к этому порогу после прокрутки. Порог определяется любым объявлением направления, таким как: top: 0;, которое фиксируется, как только элемент достигает верхнего края его родителя.

Липкий элемент всегда относительно позиционирован для своего родителя (во многом похоже на position: absolute;). Это означает, что эти элементы будут фиксироваться и отклеиваться только в пределах своего родительского элемента, а не в окне просмотра (упрощая нашу работу); это также означает, что пороговые значения отмечены краями родительского элемента. Самое замечательное в этом ограничении состоит в том, что вы можете контролировать перекрытие (или отсутствие) нескольких липких элементов.

Липкая графика полностью обрабатывается CSS, в то время как единственное, что делается в JavaScript — это обработка триггеров шага. Мы решили здесь использовать enter-view.js, потому что она имеет невероятно простой интерфейс, она суперлегкая, и Рассел написал о ней. Однако подойдет любая триггер-библиотека, будь то Waypoints, Scrollama или другая.

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Код

Ниже приведены коды HTML, CSS и JavaScript, которые делают эту работу, не включая код для эстетики. Вы можете просмотреть полный код для этих примеров на codepen или github.

<div class='scrolly'>

 <!-- sticky graphic -->
 <figure class='sticky'>
  <!-- chart stuff in here -->
 </figure>

 <!-- step text -->
 <article>
  <div class='step' data-index='0'>
 <p>Step text</p>
  </div>
  <!-- ...more steps -->
 </article>

</div>
article {
  position: relative;
}
figure.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
enterView({
 selector: stepSel.nodes(),
 offset: 0.5,
 enter: el => {
  const index = +d3.select(el).attr('data-index');
  updateChart(index);
 },
 exit: el => {
  let index = +d3.select(el).attr('data-index');
  index = Math.max(0, index - 1);
  updateChart(index);
 }
});

Заключение

Вы можете реализовать это поведение и в JavaScript, но у position: sticky есть несколько ключевых преимуществ. Прослушиватели прокрутки в JavaScript не всегда является лучшим решением: они могут ухудшать производительность. В зависимости от скорости прокрутки и устройства, которое использует пользователь, прослушиватель может выпасть из-за синхронизации и должен будет догонять прокрутку, заставляя элемент резко перепрыгивать вместо плавной прокрутки. Помимо проблем с производительностью, гораздо проще написать две строки CSS, чем кучу JavaScript.

Но хорошо ли это поддерживается? Да, хорошо! Помимо нескольких мелких ошибок с элементами thead и tr, это хорошо подходит для самых последних версий всех основных браузеров. IE не поддерживает эту функцию (ну, естественно…), но есть несколько полифиллов и справочников с потерей поддержки порог в некоторых направлениях. Если вы не слишком любите полифиллы, или они недоступны, просто оставьте все, как есть, вы всегда можете … ничего не делать! Преимущество position: sticky заключается в том, что оно имеет элегантную встроенную деградацию; если браузер не поддерживает значение, элемент останется статическим в том порядке, в котором он был добавлен. И если вы хотите применить креативный подход, то можете использовать запрос функции @supports (position: sticky) и реализовать резервный макет.

Автор: Elaina Natario

Источник: https://pudding.cool/

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

Курс по CSS3

Прямо сейчас изучите CSS3 с нуля!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree