Скроллинг — управление содержимым экрана прокруткой¶

Скроллинг (от англ. scroll — «прокручивать», «листать») — перемещение видимой области экрана вверх или вниз для просмотра содержимого, которое не помещается на дисплее целиком. Термин применяется к интерфейсам компьютеров, смартфонов, планшетов и веб-браузеров; в разговорной речи глагол «скролить» означает просматривать ленту новостей, социальные сети или документы, прокручивая экран пальцем или мышью.

¶Происхождение термина

Слово происходит от английского scroll — свиток, рукописный свиток, который разворачивали для чтения. В компьютерной терминологии scrolling появился в 1960-х годах в контексте текстовых терминалов и графических систем, где экран мог отображать лишь часть документа. В русский язык «скроллинг» вошёл в 2000-е годы вместе с распространением смартфонов с сенсорными экранами и социальных сетей.

¶История

¶Текстовые терминалы и ранние ЭВМ

В ранних компьютерных системах экран отображал ограниченное число строк текста. Для просмотра документа использовались команды вроде scroll в оболочках Unix или клавиши Page Up/Page Down. Прокрутка выполнялась построчно или поэкранно.

¶Графические интерфейсы

С появлением графических интерфейсов (Xerox Alto, 1973; Apple Macintosh, 1984) прокрутка стала визуальной: содержимое двигалось плавно, а не скачками. Появились полосы прокрутки (scroll bars) — вертикальные и горизонтальные полосы с ползунком, позволяющие перемещаться по документу и оценивать его размер.

¶Сенсорные экраны

Главный толчок к популяризации термина дал выход iPhone в 2007 году. Мультитач-интерфейс позволил выполнять прокрутку пальцем: движение вверх по экрану прокручивало содержимое вниз и наоборот. Жест получил название «flick» или «swipe». Появились инерционная прокрутка (содержимое продолжает движение после отрыва пальца, замедляясь) и «резинка» (rubber banding) — эффект упругого отскока при достижении края списка.

¶Виды прокрутки

¶Техническая реализация

¶В вебе

В HTML-документах прокрутка реализуется через CSS-свойства overflow, scroll-behavior, а также свойства scroll-snap для «магнитной» привязки к элементам. JavaScript-библиотеки (Lodash, ScrollMagic, GSAP) позволяют создавать сложные анимации при прокрутке — parallax-эффекты, появление элементов и так далее. События scroll, wheel и touch-события (touchstart, touchmove, touchend) позволяют перехватывать и обрабатывать прокрутку.

¶На мобильных устройствах

Операционные системы iOS и Android предоставляют компоненты прокрутки (UIScrollView, RecyclerView), поддерживающие инерционную прокрутку, «резинку» и привязку к элементам. Отдельно реализуется «подтягивание для обновления» (pull-to-refresh) — жест, при котором пользователь тянет ленту вниз, чтобы загрузить новые данные.

¶Влияние на восприятие контента

¶Бесконечная прокрутка

Технология infinite scroll, популяризированная Twitter и Pinterest, удерживает пользователя в ленте, убирая необходимость нажимать «показать ещё». По данным исследований, такой интерфейс увеличивает время, проведённое в приложении, но затрудняет навигацию и поиск конкретного материала.

¶Прокрутка и внимание

Исследования показывают, что пользователи сканируют страницы в форме буквы F: взгляд движется вдоль верхней части, затем вниз по левому краю. Плавная прокрутка и «липкие» элементы (sticky headers) учитывают эту особенность.

¶Скроллинг как культурное явление

В 2010-е годы «скроллинг» стал обозначать не только технический жест, но и образ жизни — бесконечное пассивное потребление контента в лентах социальных сетей. Появились термины «doomscrolling» (прокрутка негативных новостей) и «fear of missing out» (страх упустить что-то важное). Исследователи медиа связывают рост этих явлений с алгоритмической выдачей контента, максимизирующей вовлечённость.

¶См. также

• Мультитач
• Полоса прокрутки
• Инфографика

¶Источники

• Круглов А. В. «Интерфейсы: от кнопок до жестов»
• Нильсен Я. «Usability Engineering»
• Статьи о разработке интерфейсов на Habr
• Документация Apple Human Interface Guidelines
• Документация Google Material Design