05-06-2018 13:31

Динамичный скроллинг – это что такое?

Идея скроллинга стара как компьютерный мир. Первые компьютеры, первые операционные системы и стабильные «барьеры начал» компьютерного века: 640К памяти у компьютера и 80х25 у размера текстового экрана (графический режим - особое дело). Скроллинг не заметил клавиатуру, но успел дать колесико мышке.

Современные представления о скроллинге - не чета его истории, а что будет дальше - еще интереснее. Общепринятое мнение по вопросу: «Скроллинг - это что такое?» - способ вывести в видимую область информацию по кусочкам, плавно, постранично, с полосами прокрутки или с кнопками движения по контенту, вертикально или горизонтально.

Чикиниться - это модно? Что значит "зачекиниться"?Вам будет интересно:Чикиниться - это модно? Что значит "зачекиниться"?

Классическая идея

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

Кнопочный скроллинг - это что-то более простое и компактное в плане реализации, встречается не менее часто – у него своя ниша, в которой полосками прокрутки не управиться.

Отступ сверху CSS: позиционирование контентаВам будет интересно:Отступ сверху CSS: позиционирование контента

Иногда возможность делать скроллинг (HTML) выносится на мышку или тачпад ноутбука, но в современной классической идее это все те же полосы прокрутки: справа - вертикальная, внизу - горизонтальная. Только вертикальное движение доступно колесику мышки, а остальное - клику на полосе прокрутки и движениям пальцев на экране смартфона или иного девайса.

Важная фишка классической идеи - прокрутка части информации. Как в таблице: шапка должна находиться на месте, а строки таблицы должны двигаться. Статичной может быть любая часть информации на экране. Все зависит от области применения, задачи и умения разработчика.

Блочный тег может иметь собственные полосы прокрутки вне всей страницы, открытой в браузере. Разработчик может как заблокировать движение информации, так и сделать плавный скроллинг, или придать ему какой-либо иной эффект движения.

Не обязательно, что полосы прокрутки будут только справа и внизу. Многие разработчики делают свои варианты полосок прокрутки и вовсе не всегда их прикрепляют к стороне окна браузера или блочного элемента. Некоторые предпочитают выносить управление скроллингом в самостоятельный элемент. Это может определяться областью применения или архитектурой аппаратных средств – ведь не все же компьютеры оснащены только клавиатурой и мышкой, есть и другие устройства управления.

Коллизии классического жанра

Отличие мобильных устройств от «клавиатуро-мышечных»: работа пальцев рук, положение (и/или поворот и движение устройства) и голос от кнопок клавиатуры и мышки (движение, клики, колесико) - известные проблемы: кроссбраузерность, адаптивность... На все это уже давно есть те или иные решения.

Но когда, например, в поисковую выдачу вылетает миллион документов, по которому организован скролл, а посетителя заинтересовал всего один, по которому тоже уже пошел скролл, то как быть со скроллингом по всем документам, когда в текущем документе посетитель разочаровался, а его окно еще не закрыто? Как сделать скроллинг в скроллинге, насколько реализуема здесь рекурсия и насколько велики шансы двигаться семантически параллельно по всем уровням скроллинга?

Параллакс и адаптивные ему мысли

Современный разработчик преследует, далеко не всегда, идею - нести доброе и вечное в том виде, в котором оно востребовано. Часто не потому, что он не желает этого, просто ресурсная база (в основном инструментальная и семантическая) во многом все еще ограничена. В скроллинге с каждым днем проблем все больше и больше.

Идея скроллинга с параллакс-эффектом очень интересна, выглядит замечательно, поедает много ресурсов и абсолютно не адаптивна к изменению информации, ее структуры и содержания.

Красота, действительно, всегда требует жертв - и в реальной жизни, и в компьютерном деле, но посетитель в реальной жизни «всегда имеет» скроллинг в нужном ему варианте и никогда не задумывается, где ему делать горизонтальный скроллинг, а где можно обойтись вертикальным.

Вообще-то, в реальности человек не привык относить то, что делает, к перемещению по информации через окошко или форточку. Понятие скроллинг - это что-то из мира мониторов компьютеров, на которых многообразию информации нет места в полном объеме, потому приходится довольствоваться многим через малое.

Параллакс и его реализации

На сегодня реализаций скроллинга с использованием параллакс-эффекта достаточно много. Хороший пример: реализация от компании SONY, которая, по мнению многих, является очень приличной. Возможно, уже достаточное количество разработчиков потратило массу рабочего времени и создали множество вариантов быстрого изменения одной информации на фоне медленного изменения другой.

Рекомендации по использованию инструментов реализации параллакс-эффектов обычно начинаются с общего пожелания вешать их на пару элементов, чтобы не раздражать посетителя медлительностью процесса визуализации информации. В общем-то, это излишнее правило. Смотреть на иную реализацию так интересно, что можно даже забыть о том, зачем пришел.

Пара параллакс-эффект и скроллинг - это что-то, несомненно, яркое, но вопрос заключается в ином. Информации свойственна динамика. Это означает, что шикарный параллакс может оказаться невостребованным, если что-то пойдет не так. Если поисковая система изменит свою выдачу, то придется изменить в ее парсинге, это приведет к необходимости изменения форм представления информации, ну и так далее.

Проблема здесь лежит в особенностях современного стиля написания программ. Все средства отличные, полнофункциональные и мощные. Опыт и знания действительные и значительные. Но информация переменчива, она живет собственной жизнью, а задачам и областям применения приходится под нее подстраиваться.

Динамика выдачи, пример

Поиск – одна из основных забот интернета. Оставим за пределами внимания обязанность поисковых машин шерстить просторы интернета в поисках изменившейся информации, согласимся: скроллинг - это что-то статичное по логике вещей.

Если в окне браузера начался скроллинг, а уж тем более когда другому скроллингу подвергся элемент внутри этого скроллинга, то изменение поисковой выдачи не имеет значения.

На самом деле должно быть иначе. Информация, по которой выполняется скроллинг - это что-то иное, чем было вначале, всегда может меняться как ее объем, так и ее содержание. Посетитель, однако, лишен возможности узнать об этом. Единственный вариант для него - начать все с начала.

О скроллинге ближайшего времени

Безусловно, до тех пор, пока окно в мир информации – это браузер и блочные элементы на страницах, физически – это экран монитора, планшета, смартфона или иного девайса, потребность в скроллинге останется и будет иметь смысл (как показать информацию через окошко, как оптимизировать управление окошком и информацией в нем).

Однако не менее важным является дополнение этой доктрины требованием обеспечить динамику информации, подлежащей отображению.

Скроллинг - это что-то динамическое, то есть не окно с полосками/кнопками прокрутки/движения, это инструмент доступа к информации определенного содержания (возможно, еще и структуры, но хотя бы реализовать динамику содержания …).

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

В общем, параллакс параллаксом, а современный скроллинг – это как минимум три полосы и один индикатор, … К двум известным приходит полоса движения содержания, а индикатор говорит посетителю: «Все что вы видите, сэр, уже давно изменилось».



Источник