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

Более простая реализация скроллинга с помощью 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 или другая.

Код

Ниже приведены коды 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.