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

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

¶История

Понятие прокрутки экранного содержимого появилось вместе с графическими текстовыми редакторами конца 1970-х — начала 1980-х годов. В системе Xerox Star (1981) полоса прокрутки была реализована как элемент оконного интерфейса. В ранних версиях Macintosh и Microsoft Windows полоса прокрутки стала стандартной частью окна.

Само слово «scroll» отсылает к свитку — длинному пергаментному или папирусному документу, который разворачивали по мере чтения. Метафора перенеслась на цифровой интерфейс: содержимое «разворачивается» за пределы экрана.

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

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

По направлению:

• Вертикальная — наиболее распространённый тип, перемещение сверху вниз.
• Горизонтальная — используется для галерей, таблиц, временных шкал.
• Диагональная и свободная — встречается в картографических и 3D-приложениях.

По способу управления:

• Колёсико мыши — стандартный механизм настольных компьютеров; поддерживается с середины 1990-х годов.
• Полоса прокрутки — перетаскивание ползунка курсором.
• Сенсорный жест — свайп пальцем по экрану.
• Клавиатура — клавиши Page Up, Page Down, Home, End, стрелки.
• Голос и вспомогательные технологии — для пользователей с ограничениями.

По поведению:

• Плавная (smooth) — анимированное перемещение с замедлением.
• Дискретная — постраничная прокрутка.
• Бесконечная (infinite scroll) — подгрузка новых порций контента по мере приближения к концу страницы, без явного «конца».

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

¶В вебе

В HTML-документах прокрутка реализована на уровне браузера. Основные свойства CSS:

• overflow — определяет, что происходит при выходе содержимого за границы блока (visible, hidden, scroll, auto);
• scroll-behavior: smooth — включает плавную прокрутку;
• scroll-snap — привязка к определённым точкам (используется в каруселях).

JavaScript предоставляет события scroll, методы scrollTo(), scrollBy(), scrollIntoView(), а также свойство scrollTop для программного управления.

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

На iOS и Android прокрутка управляется системным жестовым обработчиком. Особенности:

• Rubber band (резиновый эффект) — упругое «отскакивание» при достижении края контента, впервые массово применено в iOS.
• Momentum scrolling — инерционная прокрутка, продолжение движения после отрыва пальца.
• Pull-to-refresh — жест «потяни вниз для обновления», впервые популяризированный приложением Tweetie (2008).

¶Влияние на пользовательский опыт

Скролл стал предметом исследований в области юзабилити. Ключевые наблюдения:

• По данным исследований Nielsen Norman Group, пользователи охотно прокручивают страницу вниз, если первые экраны содержат релевантную информацию; миф о том, что «выше сгиба» (above the fold) находится только читаемый контент, был опровергнут ещё в начале 2010-х.
• Бесконечная прокрутка повышает вовлечённость, но может затруднять навигацию и осознанное использование времени.
• Плавная анимация прокрутки воспринимается как признак качества интерфейса, однако чрезмерные анимации могут вызывать укачивание (кинетоз) у чувствительных пользователей.

¶Скролл в культуре

Жест прокрутки стал настолько привычным, что породил производные явления: «скролл-хеви» (scroll heavy) — привычка бесцельно прокручивать ленту; «doomscrolling» — навязчивая прокрутка новостей с негативным содержанием. В графическом дизайне появился термин «скролл-сторителлинг» — формат, где повествование раскрывается по мере прокрутки страницы.

¶Примечания

В русском языке слово «скролл» используется как в значении процесса («прокрутка»), так и в значении объекта (свиток в играх и фэнтези, атрибут магии). В контексте интерфейсов преимущественно употребляется как заимствование; в официальных переводах системных интерфейсов встречается калька «прокрутка».

¶Источники

• Nielsen Norman Group. Scrolling and Attention.
• Apple Human Interface Guidelines. Scroll Views.
• Microsoft Fluent Design System. ScrollBar.
• Шнайдерман Б. Дизайн интерфейса человека–компьютера. — М.: Вильямс.
• Круг С. Основы проектирования интерфейсов.