Динамічний скролінг – це що таке?

Ідея скролінгу стара як комп'ютерний світ. Перші комп'ютери, перші операційні системи і стабільні «бар'єри почав» комп'ютерного століття: 640К пам'яті комп'ютера і 80х25 у розміру текстового екрану (графічний режим - особлива справа). Скролінг не помітив клавіатуру, але встиг дати коліщатко мишки. Сучасні уявлення про скролінгу - не рівня його історії, а що буде далі - ще цікавіше. Загальноприйнята думка з питання: «Скролінг - це що таке?» - спосіб вивести у видиму область інформацію по шматочках, плавно, посторінково, з смугами прокрутки або з кнопками руху по контенту, вертикально або горизонтально.

Класична ідея

Сьогодні скролінг прийнято асоціювати з вікном браузера або областю блокового елемента, що допускає скролінг. Потік інформації може виходити за межі виділеної видимій області і можна відображати тільки його частину. Природно, потрібні смуги прокручування вліво-вправо (по горизонталі) вгору-вниз (по вертикалі) або кнопки руху по контенту. Кнопковий скролінг - це щось більш просте і компактне в плані реалізації, зустрічається не менш часто – у нього своя ніша, в якій смугами прокрутки не впоратися. Іноді можливість робити скролінг (HTML) виноситься на мишку або тачпад ноутбука, але в сучасної класичної ідеї це все ті ж смуги прокручування: праворуч - вертикальна, внизу - горизонтальна. Тільки вертикальне рух доступно коліщатка мишки, а решта - кліку на смузі прокрутки і рухам пальців на екрані смартфона або іншого девайса.


Важлива фішка класичної ідеї - прокрутка частини інформації. Як в таблиці: шапка повинна знаходитися на місці, а рядки таблиці повинні рухатися. Статичною може бути будь-яка частина інформації на екрані. Все залежить від області застосування, задачі та вміння розробника. Блочний тег може мати власні смуги прокручування поза всієї сторінки, відкритої в браузері. Розробник може заблокувати рух інформації, так і зробити плавний скролінг, або надати йому який-небудь інший ефект руху. Не обов'язково, що смуги прокручування тільки праворуч і внизу. Багато розробники роблять свої варіанти смужок прокручування і зовсім не завжди їх прикріплюють до стороні вікна браузера або блокового елемента. Деякі вважають за краще виносити управління скролінгом в самостійний елемент. Це може визначатися областю застосування або архітектурою апаратних засобів – адже не всі ж комп'ютери оснащені тільки клавіатурою і мишкою, є і інші пристрої керування.

Колізії класичного жанру

Відмінність мобільних пристроїв від «клавиатуро-м'язових»: робота пальців рук, положення (та/або поворот і рух пристрою) і голос від кнопок клавіатури і мишки (рух, кліки, коліщатко) - відомі проблеми: кросбраузерність, адаптивність На все це вже давно є ті або інші рішення. Але коли, наприклад, у пошукову видачу вилітає мільйон документів, за яким організований скролл, а відвідувача зацікавив лише один, на якому теж вже пішов скролл, то як бути зі скролінгом по всім документам, коли в поточному документі відвідувач розчарувався, а його вікно ще не закрите? Як зробити скролінг скролінгу, наскільки реалізована тут рекурсія і наскільки великі шанси рухатися семантично паралельно за всіма рівнями скролінгу?

Паралакс і адаптивні йому думки

Сучасний розробник переслідує далеко не завжди, ідею - нести добре і вічне в тому вигляді, в якому воно затребуване. Часто не тому, що він не бажає цього, просто ресурсна база (в основному інструментальна і семантична) багато в чому все ще обмежена. У скролінгу з кожним днем проблем все більше і більше. Ідея скролінгу з паралакс-ефектом дуже цікава, виглядає чудово, поїдає багато ресурсів і абсолютно не адаптивна до зміни інформації, її структури і змісту. Краса, дійсно, завжди вимагає жертв - і в реальному житті, і в комп'ютерному справі, але відвідувач в реальному житті «завжди має» скролінг в потрібному йому варіанті і ніколи не замислюється, де йому робити горизонтальний скролінг, а де можна обійтися вертикальним. Взагалі-то, в реальності людина не звик відносити те, що робить, переміщення інформації через вікно або кватирку. Поняття скролінг - це щось зі світу моніторів комп'ютерів, на яких різноманіттю інформації немає місця в повному обсязі, тому доводиться задовольнятися багатьом через мале.

Паралакс і його реалізації

На сьогодні реалізацій скролінгу з використанням паралакс-ефекту досить багато. Хороший приклад: реалізація від компанії SONY, яка, на думку багатьох, є дуже пристойною. Можливо, вже достатня кількість розробників витратив масу робочого часу і створили безліч варіантів швидкого зміни однієї інформації на тлі повільного зміни іншої. Рекомендації щодо використання інструментів реалізації паралакс-ефектів зазвичай починаються з загального побажання вішати їх на пару елементів, щоб не дратувати відвідувача повільністю процесу візуалізації інформації. Загалом-то, це зайве правило. Дивитися на іншу реалізацію так цікаво, що можна навіть забути про те, навіщо прийшов.
Пара паралакс-ефект і скролінг - це що-то, безсумнівно, яскраве, але питання полягає в іншому. Інформації властива динаміка. Це означає, що шикарний паралакс може виявитися незатребуваним, якщо щось піде не так. Якщо пошукова система змінить свою видачу, то доведеться змінити її парсингу, це призведе до необхідності зміни форм подання інформації, ну і так далі. Проблема тут лежить в особливостях сучасного стилю написання програм. Всі кошти відмінні, повнофункціональні і потужні. Досвід і знання дійсні і значні. Але інформація мінлива, вона живе власним життям, а завданням і областях застосування доводиться під неї підлаштовуватися.

Динаміка видачі, приклад

Пошук – одна з основних турбот інтернету. Залишимо за межами уваги обов'язок пошукових машин шерстити простори інтернету в пошуках нової інформації, погодимося: скролінг - це щось статичне за логікою речей. Якщо у вікні браузера почався скролінг, а вже тим більше коли іншому скроллингу піддався елемент всередині цього скролінгу, то зміна пошукової видачі не має значення. Насправді повинно бути інакше. Інформація, по якій виконується скролінг - це щось інше, ніж було спочатку, завжди може змінюватися як її обсяг, так і її зміст. Відвідувач, однак, позбавлений можливості дізнатися про це. Єдиний варіант для нього - почати все з початку.

Про скролінгу найближчого часу

Безумовно, до тих пір, поки вікно у світ інформації – це браузер і блокові елементи на сторінках, фізично – це екран монітора, планшета, смартфона або іншого девайса, потреба в скролінгу залишиться і буде мати сенс (як показати інформацію через віконце, як оптимізувати управління віконцем та інформацією в ньому). Однак не менш важливим є доповнення цієї доктрини вимогою забезпечити динаміку інформації, що підлягає відображенню. Скролінг - це щось динамічне, тобто не вікно з смужками/кнопками прокрутки/руху, це інструмент доступу до інформації певного змісту (можливо, ще й структури, але хоча б реалізувати динаміку змісту ). Зміст змінюється, його обсяг теж. Якщо елемент змісту перебуває в полі зору відвідувача, той повинен отримати повідомлення про це, так само як і про те, що в переглянутий вже відбулися зміни, а взагалі-то на смузі змісту (це не горизонтальний скролінг і не вертикальний, а саме змістовний) має місце рух інформації. Загалом, паралакс паралаксом, а сучасний скролінг – це як мінімум три смуги і один індикатор, До двох відомих приходить смуга руху змісту, а індикатор каже відвідувачу: «Все що ви бачите, сер, вже давно змінилося».