Скроллинг что это такое

Значение слова «скроллинг»

Выделяют три типа скроллинга:

линейный или «обычный» (двигающиеся объекты появляются у одного края экрана и исчезают у другого).

циклический (объект, исчезнув с одного края, появляется у другого).

отскакивающий (объект, дойдя до края экрана, меняет направление движения на противоположное).

скро́ллинг

1. перемещение данных по экрану дисплея в вертикальном или горизонтальном направлении

Делаем Карту слов лучше вместе

Привет! Меня зовут Лампобот, я компьютерная программа, которая помогает делать Карту слов. Я отлично умею считать, но пока плохо понимаю, как устроен ваш мир. Помоги мне разобраться!

Спасибо! Я стал чуточку лучше понимать мир эмоций.

Вопрос: облегчённый — это что-то нейтральное, положительное или отрицательное?

Источник

Прокрутка в вебе: букварь

Автор — Нолан Лоусон, менеджер проекта Microsoft Edge

Прокрутка — одно из самых древних взаимодействий в вебе. Задолго до появления методов pull-to-refresh и списков бесконечной загрузки скромная полоса прокрутки решила изначальную проблему масштабирования в вебе: как взаимодействовать с контентом, который распространяется за пределы доступной области просмотра?

Сегодня прокрутка всё ещё остаётся самым фундаментальным взаимодействием в Сети, и, возможно, самым неправильно понятым. Например, вы знаете разницу между следующими сценариями?

Чтобы ответить на этот вопрос и понять, как реализовать наиболее плавную прокрутку для своего сайта, отступим на шаг понять и разберёмся, как браузеры разбираются с многопоточностью и вводом.

Многопоточный веб

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

Например, если вы добавите этот (ужасный) сниппет JavaScript на страницу, то немедленно заметите ухудшение в работе:

Пока этот JavaScript крутится в бесконечном цикле, кнопки не работают, элементы форм не реагируют и даже анимированные GIF’ки тормозят — во всех смыслах и отношениях страница зависла. Можете изучить эффект в действии в простом демо.

Более того, если вы попытаетесь прокрутить страницу клавишами «вверх» и «вниз» на клавиатуре, страница предсказуемо застрянет, пока JavaScript не прекратит выполнение. Всё это явные свидетельства нашего представления веба как однопоточной среды.

Есть забавная аномалия: если попробовать прокрутку через тачскрин, то страница отлично прокручивается вверх и вниз, хотя JavaScript и блокирует всё остальное на странице. То же самое относится к прокрутке с тачпада, колесом мыши и прокрутке после захвата страницы курсором click-and-drag (в зависимости от браузера).

Каким-то образом некоторые действия по прокрутке могут изменять состояние страницы, в то время как всё остальное — кнопки, поля ввода данных, GIF’ы — полностью зависло. Как мы можем совместить это с нашей теорией однопоточного веба?

История двух потоков выполнения

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

С годами разработчики браузеров осознали, что выгрузка вспомогательной работы в фоновые потоки может дать значительную выгоду по плавности работы и чувствительности. Прокрутка настолько важна для ключевого опыта работы с браузером, что эту задачу быстро выбрали для такой оптимизации. В наше время все основные браузерные движки (Blink, EdgeHTML, Gecko, WebKit) поддерживают прокрутку за пределами основного потока выполнения в той или иной степени (Firefox последним присоединился к клубу, с версии Firefox 46).

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

Правда, у асинхронной прокрутки есть распространённый побочный эффект, который называют эффектом шахматной доски (checkerboarding). Он впервые проявился на в Safari для iOS в виде серых и белых клеток, словно с шахматной доски. В большинстве современных браузеров эффект проявляется как пустое пространство на экране, если вы осуществляете прокрутку быстрее, чем браузер может отрисовать страницу. Это не идеально, но это приемлемый компромисс, по сравнению с заблокированной, дёргающейся или неоткликающейся прокруткой.

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

Здесь будет поучительной небольшая история. Когда впервые вышли операционные системы вроде Windows и macOS, они допускали только один поток выполнения, и мало кто предвидел необходимость предусмотреть одновременный ввод. Только когда появились многоядерные машины, операционные системы начали встраивать параллелизм в свою архитектуру.

Также как рудиментарные органы животных дают понять их эволюционную историю, однопоточное происхождение операционных систем проявляет себя, если посмотреть на способы прокрутки в вебе. Только если операционная система допускает параллельный ввод — с мыши, клавиатуры или другого устройства — браузеры могут эффективно оптимизировать прокрутку, чтобы на неё не влияло длительное выполнение JavaScript, захламившего основной поток выполнения.

Однако в группе разработки Microsoft Edge мы делаем успехи, чтобы гарантировать плавный и восприимчивый скроллинг, независимо от его метода. В EdgeHTML 14 (который вошёл в состав Windows 10 Anniversary Update) мы поддерживаем фоновую прокрутку для следующих методов:

По результатам тестирования в Windows 10 (14393, Surface Book) и macOS Sierra (10.12, MacBook Air) мы получили следующие результаты:

Как демонстрирует* эта таблица, поведение прокрутки может драматически изменяться от браузера к браузеру, и даже от одной ОС к другой. Если вы тестируете один метод прокрутки только в одном браузере, то получите весьма неполные результаты производительности своего сайта, по сравнению с тем, как в реальности с ним работают пользователи!

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

Как прослушивающие процессы мешают прокрутке

Фоновая прокрутка даёт ощутимую прибавку в эффективности — прокрутка и JavaScript полностью разделены, позволяя им работать параллельно без помех друг другу.

Но каждый, кто немного разрабатывал веб-страницы, знает, как установить связь между JavaScript и прокруткой:

Менее очевидно влияние такого примера:

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

Обратите внимание, что это относится не только к колесу мыши: на тач-устройствах прокрутка тоже может быть заблокирована прослушивающими процессами touchstart или touchmove.

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

Есть несколько интерфейсов JavaScript API, связанных с прокруткой, однако они не блокируют прокрутку. Событие scroll, хотя это в чём-то нелогично, не может блокировать прокрутку, потому что оно запускается после прокрутки, и поэтому является неотменяемым. Также и новый Pointer Events API, представленный в IE и Microsoft Edge, и который недавно начали внедрять в Chrome и Firefox, изначально спроектирован с целью избежать неумышленного блокирования прокрутки.

Даже в тех случаях, когда нам действительно нужно прослушивать события wheel или touchstart, есть определённые хитрости, как веб-разработчики могут гарантировать работу прокрутки с максимальным качеством. Посмотрим на некоторые из этих хитростей.

Глобальные и локальные прослушивающие процессы

В предыдущем примере мы видели случай глобального прослушивающего процесса (то есть прикреплённого к window или document). Но что насчёт прослушивающих процессов для индивидуальных элементов прокрутки?

Другими словами, представьте страницу, для которой работает прокрутка, но на странице есть отдельная область с собственной независимой прокруткой. Блокирует ли браузер прокрутку для всей страницы, если вы добавите прослушивающий процесс только в этой области?

Если вы проверите на простой демонстрационной странице, то заметите, что Microsoft Edge и Safari оставят плавную прокрутку для целого документа, если прослушивающий процесс для прокрутки находится в div с независимой прокруткой.

Вот таблица браузеров и их поведения:

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

К сожалению, не все фреймворки JavaScript допускают такую практику — в частности, React, как правило, добавляет глобальный прослушивающий процесс ко всему документу даже если тот должен относиться только к части страницы. Однако есть открытый тикет конкретно для этой проблемы, и парни из React сказали, что с радостью примут пулл-реквест. (Уважение парням из React, которые так быстро среагировали на наше предложение)

Пассивный прослушивающий процесс

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

С таким подходом браузер будет обрабатывать прокрутку так, как будто прослушивающий процесс wheel вообще отсутствует. Эта функция уже доступна в последних версиях Chrome, Firefox и Safari, и должна скоро появиться в будущем релизе Microsoft Edge. (Обратите внимание, что нужно применять feature detection для поддержки браузеров, которые не распознают пассивные прослушивающие процессы).

Для некоторых событий (в том числе touchstart и touchmove) Chrome с версии 56 принял решение вмешиваться и сделал их пассивными по умолчанию. Имейте в виду эту незначительную разницу между браузерами, когда добавляете прослушивающие процессы!

Заключение

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

Во-первых, лучше не добавлять прослушивающие процессы wheel или touch к глобальным объектам document или window, а вместо этого добавлять их к меньшим элементам с индивидуальной прокруткой. Разработчикам также следует использовать пассивные прослушивающие процессы, где только возможно, с применением feature detection, чтобы избежать проблем совместимости. Использование Pointer Events (там есть polyfill) и прослушивающих событий scroll — тоже верный способ избежать непреднамеренной блокировки прокрутки.

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

Наша группа Microsoft Edge продолжит инновации в данной области, чтобы обеспечить плавную прокрутку для большего количества сайтов и пользователей. Скажем это для скромного скроллбара — самого старого и неоднозначного взаимодействия в вебе!

* Результаты получены на последней версии каждого браузера в феврале 2017 года. С тех пор Firefox 52 обновил поддержку прокрутки, и теперь соответствует поведению Edge 14 во всех тестах, за исключением скроллинга полосой прокрутки. Надеемся, остальные браузеры тоже сделают улучшения в реализации прокрутки и сделают веб быстрее и более восприимчивым!

Источник

Пользователи знают, что такое скроллинг

Иногда (очень часто) вы можете слышать, что «весь контент должен быть выше нижней части экрана, иначе люди могут его не заметить». Я всегда очень скептически относился к этому мнению. Я убежден, что большинство людей, которые используют Интернет, знают, как использовать прокрутку (скроллинг) и сделают это при необходимости. Очень удачной в решении этого вопроса является статья «The myth of the page fold: evidence from user testing». В этой статье, основанной на результатах тестирования сайтов более чем 800 пользователями, авторы пришли к заключению, что нижняя граница окна браузера не является существенным препятствием для пользователя. Статья заканчивается тремя советами для дизайнеров:

Обратите внимание на то, что мы не говорим о том, что протяженность страницы и местоположение наиболее значимого содержимого не имеет значения. Наиболее важный материал нужно располагать на странице как можно выше, но также нет необходимости ужимать всё в верхних 600 пикселях.

Источник

Что такое скроллинг? Где используется скроллинг?

Что такое скроллинг? Где используется скроллинг?

Это такая форма предоставления информации, при которой изображение, ну или текст, двигается от края к краю..

Иногда скорллингом называют колесико мышки.

Известные примеры скроллинга: Все титры в фильмах, начальные титры в Звездных Воинах, или Бегущая строка во время новостей, и тд

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

Раньше существовал такой микрокомпьютер, назывался он ZX Spectrum. Так там, когда страница заполнялась полностью, компьютер спрашивал: Scrolling Yes/No. И если отвечаешь Yes, то начинался последующий сдвиг экрана вверх, а низ заполнялся новой информацией. Сделано это было для того, чтобы можно было прочитать написанное на экране. Ведь если бы программа не приостанавливалась и такой вопрос не задавался, человек бы не успевал прочитать выведенное и нижняя информация уезжала бы наверх и скрывалась за верхней границей экрана.

Источник

Правила скролла в мобильных приложениях. Взаимодействия и методы

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

Основы

Насколько я могу судить, при использовании такого паттерна на странице, как скролл существует одно общее правило. Правило #1

Вы можете применять скролл к объекту только по одной оси за раз.

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

Поправка

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

Вложенный скролл

Возможно, у вас не получится нарушить правило одной оси, но вы можете обойти его. Наиболее надежным способом выхода скроллинга за пределы одной оси является добавление групп вложенного скролла. Группы вложенного скролла позволяют одновременно применять вертикальные и горизонтальные жесты скролла к одному объекту. Что на самом деле происходит – это использование скролла двух отдельных объектов и применение их к одному объекту. Это означает применение группы скролла к одному объекту, а затем применение отдельной группы скролла к объекту, который уже содержит первый объект (или является его родителем). Я взял часть иерархии из дизайна, чтобы показать это. Эта структура позволяет группе «фрукты» прокручиваться отдельно от группы «овощи» и одновременно с ней, потому что группа фруктов получает жесты от двух взаимодействий скролла. По существу, вложенный скроллинг использует переходы из двух источников для обхода правила №1. Это прекрасно работает, пока эти два источника не начнут конфликтовать. В приведенном выше примере группа «фрукты» прокручивается вертикально, а родительская группа «фрукты-овощи» прокручивается по горизонтали. Это делается по необходимости. Если обе группы будут прокручиваться в одном направлении, скажем вертикально, то оба взаимодействия будут конфликтовать. Система не сможет отделить один жест скролла от другого, и дизайн, безусловно, сломается. Одно взаимодействие блокирует другое, запрещая его использование. Это приводит меня ко второму правилу использования скролла. Правило #2

Вы не можете применять к одному объекту два взаимодействия скролла на одной оси.

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

Комбинированный скролл

Не бойтесь, есть выход. Комбинированный скроллинг (название, которое я только что придумал) и есть наше решение. Вместо того, чтобы фокусироваться на фактическом взаимодействии прокрутки, комбинированный скролл позволяет вам распространить это взаимодействие для остальной части дизайна. Суть его заключается в том, чтобы анимировать взаимодействия скролла. Вы используете прогресс группы скролла для определения контента в других частях дизайна. В примере ниже (слева) группа вложенного скролла позволяет прокручивать различную обувь, а также описание для каждой пары обуви. При этом меняются иконки обуви внизу. Они не входят в группу скролла, но кажется, что они прокручиваются вместе с ней, несмотря на то, что они очень разные по размеру и форме. На самом деле срабатывает анимация, связанная с взаимодействием скролла. Я анимировал иконки обуви, чтобы они были в определенных положениях при определенных точках положения скролла. В результате один жест управляет несколькими различными частями дизайна. Кажется, что реализация подобного приема займет много времени, но я уверяю вас – это не так. Однако, не все так хорошо. Посмотрите на другой пример (справа). Получаем такую же динамику, но наоборот. Иконки обуви находятся в группе вложенного скролла, а обувь / описание – нет. Вы можете сказать, что взаимодействие не такое плавное, как в примере слева, и для активации анимации требуются большие жесты. Могу сказать вам, что это конкретное взаимодействие часто ломалось. Бывает, что скролл не вызывает анимацию. Скажем, триггер для появления обуви – это положение скролла от 0px до 66px. Если я прокручу на 5px-66px, тогда анимация не сработает, и я получу сломанный прототип. До того, как я пришел к третьему правилу скролла, было много проб и ошибок. Правило #3

Активная манипуляция

К этому моменту, думаю, я слишком далеко отклонился от первоначальной цели скролла. То, что отличает скролл от свайпа и сдвига – это активная манипуляция. Свайп начинается и заканчивается. Скроллинг всегда активен. В предыдущих дизайнах широко используется прокрутка страниц, которая удаляет это активное качество. В следующем дизайне я попытался его выделить. Я переработал (отчасти) опыт использования Medium на мобильных устройствах, чтобы добавить секцию скролла, включающую все, что может понадобиться пользователю Medium. Вы можете открывать и закрывать секцию скролла, сохраняя информационное пространство. Более того, секция скролла довольно большая, и поскольку скролл – это активное взаимодействие, вам нужно прокручивать ровно столько, сколько требуется для нужного вам контента. Сначала отображается контент с самым высоким приоритетом. Мне нравится этот дизайн, но я признаю, он слабый. И это потому, что, как вы могли заметить, я нарушил свое правило №2. Вертикальный скролл для открытия секции скролла находится поверх вертикального скролла основного контента. Иногда, при скролле, жест разрывает границы контента, заставляя секцию скролла самопроизвольно открываться. Мне, действительно, приходилось мыслить нестандартно, чтобы этот дизайн реагировал на два отдельных вертикальных жеста скролла. Тот факт, что он вообще работает, несмотря на «правило», которое утверждает, что это невозможно, означает, что есть возможности для изменения и нарушения правил. Так что… Правило #2 дополненное

Вы не можете применять к одному объекту два взаимодействия скролла в одном направлении на одной оси. : D

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

Источник

Как скроллинг может улучшить (или нарушить) пользовательский опыт

На пользовательский опыт (User Experience, UX) могут повлиять мельчайшие детали. Большая часть того, что мы делаем в Интернете, совершается нами бессознательно. Мы рассеянно смотрим на экран, прокручиваем веб-страницы и взаимодействуем с контентом.

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

Скроллинг — это недооцененный, но крайне важный элемент UX. Узнайте, как он может улучшить UX или отвлечь от него и как внедрить лучшие практики, удерживающие посетителя на сайте.

Скроллинг — это миф?

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

1. Длинный контент. Контент-маркетологи все больше склоняются к применению контента в длинной форме, так как это позитивно сказывается на поисковой оптимизации (Search Engine Optimization, SEO). Перепрыгивание по статье, состоящей из 5 страниц, может оказаться утомительным, особенно если пользователь делает это на экране мобильного устройства. Возможно, стоит отказаться от поста, практического руководства или учебника, если такой контент становится слишком сложным для чтения.

2. Тачскрины. Мобильные девайсы и сенсорные технологии естественным образом привели к утверждению прокрутки. Поскольку подобные устройства продолжают доминировать на рынке, скроллинг будет становиться все более стандартной практикой.

Нижеприведенные отчеты и исследования только подтверждают необходимость наличия удобного для прокрутки дизайна:

Подводя итог: если вы выстроите хороший дизайн, посетители будут прокручивать. Тогда возникает вопрос: «Как создать сайт так, чтобы внедрить в него прокрутку, и какие лучшие практики следует в этом случае применить?».

Сканирование и значение точек прокрутки

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

Тем не менее, есть в дизайне своя специфика: мы разбиваем сканирование на так называемые «точки прокрутки» (Scrolling Points). Неумение разбивать важную текстовую информацию на ключевые моменты вызывает явление под названием «усталость от скроллинга». Она может привести к двум результатам:

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

Преподносите контент правильно

Первый способ побудить к скроллингу — так организовать контент, чтобы его легко было прокручивать. Вот предложения по оптимизации:

Остерегайтесь эффекта ложного дна

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

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

Еще один метод предоставить визуальную подсказку — включить стрелки или надпись «Прокрутить вниз». Эти маленькие ухищрения могут вызвать большой прирост времени, проводимого человеком на сайте.

Фишки в навигации

Навигация может сыграть решающую роль в улучшении/ухудшении восприятия сайта, так что ее настройка является естественным решением ситуации. Длинный контент часто создает проблемы с навигацией, и пользователям может надоесть прокрутка то вверх, то вниз на десктопе или в мобильном формате. Простое решение — липкая навигация (Sticky Navigation). Когда навигация всегда видна, пользователям сайтов и приложений становится легче добраться до любой части контента. С целью экономии ценного экранного пространства, вы можете сделать навигационное меню доступным по запросу, и оно будет выскакивать при прокрутке около верха просматриваемой страницы. Особенно эффективно трюк работает на мобильных устройствах, для которых свойственно наличие ограниченного рабочего пространства.

Следуйте базовым правилам SEO

Скроллинг: выводы и секреты для профессионалов

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

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

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

Источник

Оставьте скроллинг сайта в покое

Простая инструкция, которая поможет избавиться от ошибок при разработке нового, супермодного и контринтуитивного скроллинга. Примеры плохой прокрутки на сайтах топовых студий России.

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

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

Интерфейс должен быть интуитивно понятен, иметь обратную связь, быстро схватываться при беглом взгляде и не путать пользователя. Там множество всяких нюансов, но я буду говорить только об обратной связи. Я терпеть не могу любой интерфейс, который плохо отзывается на мои действия.

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

Источник

Скролл-эффекты. Разновидности, тонкости, проблемы, решения. Что такое Scroolly?

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

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

К сожалению, пока не существует никаких отраслевых стандартов по поводу именования различных видов скролл-эффектов. Поэтому давайте рассмотрим самые популярные из них и дадим им собственные, наиболее подходящие по смыслу названия.

1. Parallax (Параллакс).

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

Для справки, вот определение из википедии: “Паралла́кс (греч. παραλλάξ, от παραλλαγή, «смена, чередование») — изменение видимого положения объекта относительно удалённого фона, в зависимости от положения наблюдателя.”

Например, в этом демо надпись Parallax – ScRolling in the Deep движется медленнеe скролла вниз и плавно исчезает, при этом задний фон верхней части страницы движется вверх немного быстрее скролла.

2. Back to top (Вернуться вверх).

Приятная и полезная кнопка “Back to top” изначально скрыта, появляется только тогда, когда страница немного проскроллена вниз. Вот демо.

3. Sticky (Прилипание)

Этой техникой также можно пользоваться для “прилепливания” элементов к нижней, левой или правой границе экрана, в зависимости от позиции и направления скролла.

Надо сказать, что СSS свойство position: sticky (позволяет с легкостью реализовывать подобные эффекты без применения javascript) описано в черновике спецификации CSS Positioned Layout Module Level. Но вот с поддержкой браузерами пока совсем туго.

4. Reversed sticky (Реверсное прилипание).

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

5. Progress bar (Индикатор прокрутки).

Разновидности сценариев для визуализации текушего положения пользователя на странице при скролле. Например, в этом демо есть веселый индикатор прокрутки внизу страницы.

6. Accordion (Аккордеон).

Этот сценарий подразумевает последовательное применение stcicky-эффекта к заголовкам разделов страницы при скролле. А вот и демо

7. Menu Spy (Сопровождающее меню).

Этот сценарий хорошо известен под именем scroll spy в twitter bootstrap. Он подразумевает подсветку пунктов меню навигации, в зависимости от положения скролла, например, как в этом демо.

8. Staging (Сцена).

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

Общие проблемы при реализации любых сценариев со скролл-эффектами.

Во-первых, при написании скролл-эффектов нужно учитывать большое количество факторов и величин:

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

В-третьих, на мобильных девайсах все работает плохо и с тормозами. Javascript изначально работает медленнее. В добавок к этому, мобильные браузеры блокируют выполнение javascript во время скролла.

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

Что такое Scroolly?

Scroolly – это jquery-плагин, который предоставляет Вам простой синтаксис для создания и конфигурирования скролл-эффектов. Он прост в освоении, довольно легковесный и позволяет создавать сколь угодно сложные сценарии. Нужно сказать, что все демо, которые были приведены выше, реализованы с помощью Scroolly!

Немаловажным фактом является то, что автор плагина не какой-то заморский дядька, а самый настоящий минский парень Борис Мосунов. Scrooly распространяется под свободной лицензией и находится здесь: github.com/chayka/jQuery.Scroolly

Правила, их границы и области действия.

Итак, в процессе скролла, в зависимости от положения прокрутки сраницы, нам нужно применять к элементам некоторые правила. Для этого необходимо определить границы действия этих правил.

Чтобы было проще понять о чем идет речь, приведу абстрактный пример:

Чертовски сложно воспринимается на слух, не правда ли? Лучше посмотрим на демо.

Давайте договоримся, что мы будем называть видимую область документа словом “viewport”. К сожалению, я не могу найти короткий русский аналог этого слова 🙂

В итоге, здесь мы можем выделить 3 области действия правил c 6-ю границами. Давайте опишем их:

А теперь подумайте, с чего Вы начали бы описывать всю эту логику? Даже в таком простом сценарии с одним элементом в вычислениях участвуют размер документа, размер viewport, положение viewport, размер элемента, положение элемента, положение скролла… черт возьми, как же не запутаться?

Scroolly спешит на помощь.

Вся прелесть scroolly заключается в том, что каждая из этих границ областей действия правил задается с помощью вот такого наглядного синтаксиса:

А весь сценарий описывается так:

Где vp – viewport, а el – элемент. Также можно пользоваться абстракциями doc для документа и con для контейнера элемента. А теперь об этом подробнее и с картинками…

У каждого из них есть опорные точки, которые можно использовать в синтаксисе scroolly:

Вот несколько примеров описания областей действия правил c помощью синтаксиса scrolly:

Документация

Если Вас заитересовал плагин scroolly обязательно посмотрите официальную документацию. А она существует, и даже представлена в 2-х вариантах:

Ну и самое главное: обязательно посмотрите видео с нашей конференции 4front, на котором Борис сам захватывающе рассказал про скролл-эффекты в целом и scroolly в частности.

В заключение

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

Источник

Как создать скроллинг на своем сайте с помощью CSS?

Вы хотите создать эффекты параллакса и скроллинга на странице, но не знаете, с чего начать? Не нужно сразу обращаться к Javascript: есть более простые варианты. В этой статье мы расскажем, как все сделать при помощи СSS-кода. Также объясним, с какими браузерами эффекты работать не станут.

Если нужен плавный скроллинг

Чтобы создать простую прокрутку из одной части страницы в другую, нужно использовать CSS-свойство scroll-behavior. Вот его основные значения:

Так выглядит CSS-код на примере со вторым значением и условным селектором p:

Далее мы покажем на примере, как сделать плавный переход от одной части сайта к другой при помощи значения smooth. В этом случае пользователь увидит переход при нажатии на гиперссылку, ведущую к другой части с текстом.

Пример с HTML-кодом

Шаг 1. Создадим два блока с ссылками друг на друга:

Благодаря значению smooth удалось добиться плавного скроллинга на веб-странице.

Совместимость с браузерами

Свойство scroll-behavior работает почти со всеми популярными браузерами: Google Chrome, Firefox, Safari и Opera. Исключение — Internet Explorer и старые версии браузеров. Например, на Safari версии 15.2–15.3 свойство работать не станет.

Если нужен параллакс

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

Пример с HTML-кодом

В этом случае мы сделаем так, чтобы фоновая картинка вообще не двигалась во время скроллинга.

Шаг 1. Напишем код, в котором будет большой текстовый блок фиолетового цвета:

Шаг 2. Рассмотрим код CSS. В нем будет ссылка на изображение, которая станет фоновым благодаря значению fixed в свойстве background-attachment.

В итоге получился параллакс на странице.

Примечание. Чтобы убрать этот эффект, достаточно вместо background-attachment: fixed указать в коде background-attachment: scroll. Изображение будет двигаться вместе с текстом:

Совместимость с браузерами

Свойство background-attachment работает с Google Chrome, Firefox, Opera, Internet Explorer и другими браузерами. Исключение — Safari, Android Browser и мобильная версия Opera.

Дополнительные примеры

Пример 1

Шаг 1. Напишем две строки следущим образом:

Шаг 3. Там же укажем параметры заголовков:

В итоге на сайте движутся три объекта. Перечислим их от самого медленного до самого быстрого:

Так выглядит многоуровневый скроллинг.

Пример 2

Рассмотрим, как зафиксировать какой-либо элемент на сайте во время прокрутки. Например, на сайте cloud.timeweb.com есть такой закрепленный блок:

Шаг 2. Напишем следующий CSS-код внутри тега :

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

Пример 3

В этом случае разберемся, как сделать горизонтальный скроллинг.

Шаг 1. Создадим четыре строки текста таким образом:

Так выглядит горизонтальная прокрутка страницы, которая условно разделена на несколько частей с текстом.

Заключение

Создание эффекта скроллинга — это несложный процесс. Только при помощи свойств CSS можно сделать так, чтобы пользователь видел необычные переходы между блоками сайта при прокрутке.

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

Источник

Как управлять вниманием читателя с помощью скролла

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

Исключение — когда информация привлекает внимание мозга. Есть два основных способа это сделать, согласно книге Дэвида Рока «Мозг. Инструкция по применению»:

заставить мозг бояться — тогда начнет вырабатываться норадреналин. Это естественный эволюционный рефлекс, который срабатывает, когда человек видит саблезубого тигра в кустах. С сайтами это связать сложно.

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

Рассмотрим их на примерах.

Как сделать. Если мы привлекли внимание человека к проекту и он его открыл, то должен получить обещанное — без смены темы и воды. Иначе не сработают никакие механики работы с вниманием.

Пример. Если статья называется «5 способов сделать яичницу», она не должна рассказывать о том, откуда берутся куриные яйца. Так делают авторы SEO-статей, чтобы впихнуть больше ключевых слов и нагнать трафик. Если обещаете развлекательные материалы — пусть будет настоящее развлекалово, если простую для понимания обучающую информацию — на лендинге должна быть именно она.

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

Пример. Мы делали проект к юбилею завода «КуйбышевАзот» в Тольятти. На странице юбилея завода по скроллу на картинках появляется текст, работает анимация, бегут цифры.

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

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

Как сделать. Изменения по скроллу — мощная механика, но и к ней мозг быстро привыкает, в результате концентрация внимания снижается. Поэтому иногда стоит предложить абсолютно новый опыт взаимодействия с проектом: интерактивные подписи, аудио, короткие видео. Так мозг получает дополнительный дофамин — как сердце пациента скорой помощи получает новый импульс от электрического заряда.

Пример. На странице о локомотивах «ЛокоТеха» интерактивные подписи к объектам появляются, если навести курсор на знак вопроса, описания разных локомотивов отображаются, если нажать на стрелки, а собственный локомотив соберется — если подергать ползунки конструктора.

Как сделать. Иногда лучше ставить не статичную картинку, а немного подвижную. Все, что движется, может представлять опасность или потенциал для взаимодействия, поэтому привлекает внимание мозга.

Как сделать. С механиками для управления вниманием важно быть осторожным. Если их будет слишком много или они будут превалировать над контентом, на мозг это подействует противоположным образом — он устанет воспринимать новое.

По нашему опыту, на один лендинг в 20-30 экранов достаточно 3-4 механик. Если объем меньше, хватит и 2-3. При этом использовать их стоит умеренно, иначе даже одна очень активная механика может загубить все повествование.

Пример. Квартальный дайджест «ВТБ Онлайн» должен рассказывать об обновлениях в приложении. Все управление лендингом происходит по скроллу: уменьшаются и увеличиваются картинки, вылетают карты, строятся графики и линии на карте. Кажется, что все это должно помочь мозгу сконцентрироваться, но на деле дает обратный эффект — мы видим только анимацию, но не можем прочитать текст. Механики победили полезный контент, и он за ними исчез.

Читайте другие наши статьи о приемах работы с информационными продуктами

Ещё мы собираем лучшую инфографику со всего мира и разбираем, как эти примеры могут работать в коммерческих целях, в Телеграме.

На это можно смотреть вечно. Но идея в статье крутая на самом-то деле!

Все никак не покажет дворец в геленджике.

Статистику бы по сайтам которые вы сделали по таким паттернам. А то выглядит как вредные советы.

как же я ненавижу вот эту дизайнерскую хрень

если в анимации было что-то интересное/нужное, приходится елозить туда-сюда мышью, вылавливая нужный момент

Когда нужно показать несколько фото, вертикальный скролл меняется на горизонтальный — пользователь может посмотреть всю галерею

зачем менять направление скролла?
может я хочу пропустить именно эту секцию с картинками? зачем заставлять меня смотреть ее еще раз, если я забыл что-то вверху и хочу вернуться?

а вы смотрели статистику прочтений конкретно у этой страницы?
можно как-то получить айпи адреса этих наркоманов, прокрутивших до конца? хочу пригласить их на просмотр пары других метровых лендосов с адсенсом, думаю, им такое зайдет

Если правильно выстроить лендинг

возвращаюсь с ответами на комменты

. «в 99% разработчики фокусируются только на одном устройстве — если на маке с трэкпадом все будет супер гладко, на ноуте с виндой и мышью анимация чаще будет несмотрибельна. Или наоборот».
→ Проверяли и тогда и сейчас. Ещё раз посмотрел на винде, с анимацией всё окей.

. «мобильное юзабилити с такими анимациями — отдельная форма издевательства. Ок, когда смотришь через сотовый сидя дома через домашний же вайфай в удобном кресле. Но когда на бегу ищешь нужную инфу на улице в зоне плохого приема, это ну явно не лучший вариант».
→ Иногда анимация в проектах реально мешает. Но я не могу соотнести это с Куйбышевым и представить что кто-то будет искать на Куйбышеве информацию с плохим интернетом на бегу. У проекта другая задача.

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

. «зачем менять направление скролла? может я хочу пропустить именно эту секцию с картинками? зачем заставлять меня смотреть ее еще раз, если я забыл что-то вверху и хочу вернуться?»
→ Для визуального разнообразия взаимодействия с проектом кроме одного скролла. Понятно, что не всем понравится, но и цели такой не было. В нашем случае ориентиром был клиент, ему понравилось и он захотел это в проекте. В качестве альтернативы можно было сделать галерею, как в мобильной версии, когда пользователю самому нужно протянуть галерею мышкой. На мой взгляд это дело вкуса. Одним понравился, другим нет.

. «а вы смотрели статистику прочтений конкретно у этой страницы?можно как-то получить айпи адреса этих наркоманов, прокрутивших до конца? хочу пригласить их на просмотр пары других метровых лендосов с адсенсом, думаю, им такое за»
→ Метрика есть, но доступа к ней у нас нет, так как настраивал клиент самостоятельно.

Источник

Горизонтальный скролл. Когда и где использовать

Эта статья входит в цикл моих статей “Шкатулка с секретами”, в ней я делась своими знаниями о работе и особенностях применения различных компонентов. Сегодня я хочу поговорить о таком популярном, но в тоже время спорном приёме, как горизонтальный скролл.

На сайтах с большим количеством информации дизайнеры охотно прибегают к использованию горизонтального скролла, чтобы сократить высоту страниц и контролировать объем получаемой пользователем информации.

К сожалению, данное решение часто работает не так хорошо, как хотелось бы. Основная причина заключается в том, что в веб версии пользователи до сих пор крайне неохотно работают с горизонтальным скроллом. Это решение чаще других других вызывает сильные негативные эмоции. При этом в мобильной и планшетной версии таких серьезных проблем не возникает. В подтверждение моих слов, можно почитать опубликованную уважаемыми NNgroup статью https://www.nngroup.com/articles/scrolling-and-scrollbars/

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

Рассмотрим риски, на которые стоит обратить внимание

Причины, почему горизонтальный скрол все же популярен

Рекомендации

Вместо скролла в веб версии можно использовать ссылку “смотреть больше”. Это позволит пользователю увидеть нужный контент, а если ему понадобится больше, то он сможет перейти на страницу и посмотреть там. Да, это доработка, но не очень большая.

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

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

Механика работы

Когда проектируете этот элемент, не забудьте подумать о том, как пользователь будет с ним взаимодействовать. На мой взгляд, важно помнить о трех аспектах:

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

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

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

Скролл в мобильной версии

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

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

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

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

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

Во втором случае ширина карточки рассчитана таким образом, чтобы пользователь всегда видел внушительный кусок следующей и предыдущей карточки.

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

И еще одна маленькая полезность

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

На этом все. Буду рада вашим комментариям и предложениям по интересующим темам для новых статей.

Источник

Заходят как-то два браузера в скроллбар…

Скроллбар (scrollbar, полоса прокрутки) — это простой, но эффективный механизм, который действует как основное средство, с помощью которого можно просматривать большие документы. Но это — далеко не всё, на что способны полосы прокрутки! Эти скромные рабочие лошадки ещё и неплохо подсказывают пользователям о том, каковы размеры документов, с которыми они взаимодействуют. В результате скроллбары несут на себе двойную нагрузку. Они и помогают работать с различными материалами, и информируют пользователя о размерах этих материалов.

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

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

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

Материал, перевод которого мы публикуем сегодня, посвящён некоторым особенностям использования скроллбаров в веб-приложениях.

Немного терминологии

Прежде чем мы продолжим — давайте определимся с парой терминов, которые мы будем тут использовать. А именно, мы выделяем две разновидности скроллбаров:

Стандартное поведение современных скроллбаров

По умолчанию и в iOS, и в Android скроллбары являются нефиксированными.

В macOS (в частности, речь идёт об актуальной на момент написания этого материала macOS Mojave) скроллбары скрыты до момента начала прокрутки элемента. Это — стандартное поведение системы в ситуации, когда к компьютеру не подключена мышь. Существует три варианта отображения скроллбаров (соответствующие настройки можно найти по адресу General > System Preferences ).

Настройки скроллбаров в macOS Mojave

Эти настройки, как удалось выяснить, контролируют поведение скроллбаров в браузерах Chrome, Firefox, и в новом Edge, основанном на Chromium.

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

Фиксированный скроллбар в macOS виден всегда и занимает некоторое экранное пространство

Нефиксированный скроллбар в macOS накладывается на контент в процессе прокрутки документа

Нефиксированный скроллбар в macOS скрыт в тот момент, когда документ не прокручивают

Настройки скроллбаров в Windows 10

Обзор задачи

Вот как выглядит в Windows страница, которую мы рассматривали выше в macOS.

Страница со скроллбаром в Windows

Скроллбары в Windows по умолчанию являются фиксированными. Они, кроме того, выглядят довольно-таки «тяжёлыми» с точки зрения дизайна. Они, в их стандартном варианте, гораздо шире, чем их собратья из macOS. Кроме того, цвет скроллбаров в Windows обычно соответствует системным настройкам, а не цветовой палитре веб-страницы.

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

Требования к проекту

Мы хотим разработать веб-приложение, скроллбары, используемые в котором, отличаются следующими особенностями:

Насколько далеко можно продвинуться, используя CSS?

Если говорить о CSS-свойствах, имеющих отношение к скроллингу, то тут, возможно, полезным будет почитать о свойстве overscroll-behavior. Оно позволяет управлять поведением системы при достижении границы элемента, поддерживающего прокрутку.

▍Firefox

Браузер Firefox поддерживает CSS-свойства без префиксов. Это — scrollbar-color и scrollbar-width.

В следующем примере, для понятности, используются CSS-переменные, которые не поддерживаются в Internet Explorer 11:

▍Chrome и Safari, браузер Edge, основанный на Chromium, и прочие браузеры

Браузеры, основанные на Webkit и Blink, поддерживают нестандартные псевдо-элементы, предназначенные для настройки скроллбаров:

Вот пример на CodePen, демонстрирующий возможности по настройке скроллбаров, выполняемой исключительно средствами CSS. А вот — пример, в котором демонстрируется стандартное поведение скроллбаров. Можете их сравнить.

Надо отметить, что у вышеприведённого кода есть одна проблема. Она заключается в том, что при установке свойств height или width псевдо-элемента ::-webkit-scrollbar в macOS производится замена нефиксированного скроллбара на фиксированный (происходит переопределение стандартных настроек). Однако это несложно исправить с помощью небольшого фрагмента JavaScript-кода.

CSS и немного JS

Мы можем добавить в проект небольшой объём JavaScript-кода, который позволяет узнать о том, является ли стандартный скроллбар фиксированным или нет. Выглядит это примерно так:

Здесь можно найти пример применения методики, предусматривающей совместное использование CSS и JavaScript. Вот, для сравнения, пример, демонстрирующий стандартное поведение системы.

Итоги: обзор решения задачи

На устройствах с сенсорными экранами, на которых применяются нефиксированные скроллбары (то есть — на iOS и Android-устройствах) мы просто пользуемся стандартным поведением скроллбаров.

В macOS у нас появляется возможность учитывать системные настройки, сделанные пользователем. Это означает, что мы не осуществляем непреднамеренного переключения между нефиксированными и фиксированными скроллбарами. Мы применяем стили лишь к фиксированным скроллбарам, которые видны всегда. Это позволяет нам приводить внешний вид страниц в соответствие с нашими требованиями к дизайну проекта.

В Windows, а именно — в браузерах Firefox и Chrome, нет стандартных нефиксированных скроллбаров, но тут можно, как и в других случаях, применить наш подход, предусматривающий использование исключительно возможностей CSS. Благодаря тому, что мы смогли выйти на работающие примеры использования скроллбаров, настраиваемых средствами CSS, нам удалось прийти к согласию с нашей командой дизайнеров. Мы остановились на компромиссном варианте и избежали использования тяжёлых JavaScript-решений.

Вот демонстрационные проекты, суть которых была описана выше:

Источник

Горизонтальный скролл становится модным. Разберемся в этом

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

Оригинальное название публикации: “Иск против горизонтального скролла”…

Время от времени всё переосмысливается. А значит нет ничего удивительного в том, что сайты с горизонтальным расположением контента становятся модными. Это смелая и впечатляющая дизайнерская инновация, так как в настоящее время в интернете подавляющее большинством веб-сайтов используют вертикальную прокрутку.

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

Избравшие «стезю» горизонтальной прокрутки, рассуждают с позиции собственного выбора. А организации, которые предпочли данный метод, провозглашают свои сайты произведением искусства.

(http://www.guillaumejuvenet.com/)

Горизонтальные сайты — это заявление о собственной уникальности и нежелании вписываться в общественные рамки. В результате, торговая марка, использующая такую конструкцию сайта, часто зарабатывает себе репутацию «причудливой» и «ушлой».

Почему некоторые используют горизонтальный скролл

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

Ставка на мобильные устройства может быть не такой удачной идеей

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

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

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

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

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

Продуктивное использование вертикального пространства для контентной области

В вертикальном макете, весь контент вне зависимости от степени его важности, идёт друг за другом. Ключевую информацию можно выделить только оформлением, а не позиционированием на странице. Единственное что может дизайнер — разместить ключевую информацию в начале страницы.

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

Когда стоит использовать горизонтальный скроллинг, если вы это точно хотите

(http://qandhlondon.com/)

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

Мобильные версии “десктопных” сайтов, или веб-сайты, рассчитанные на просмотр с мобильных устройств — вот сфера применения, где горизонтальный скролл полностью уместен. Однако, он также хорошо подходит и ряду других сайтов, позволяя им отображать большое количество информации простым и выгодным способом.

Проблема юзабилити

(http://movingislands.com/en)

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

Пользователи игнорируют блоки сайтов с горизонтальной прокруткой

Одна из основных реакций, которую вызывает горизонтальный скроллинг, заключается в игнорировании разделов с ним. Так как это провоцирует выход пользователя из его зоны комфорта.

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

(http://www.lorenzobocchi.com/)

Главным образом так происходит, потому что такая форма использования не соответствует ожидаемой схеме функционирования и в результате не является приемлемой или значимой.

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

Как же правильно?

(http://www.themobileplaybook.com/en-us/#/overview)

Что же делать, если вы все-таки хотите реализовать у себя на сайте горизонтальную прокрутку и не терять при этом пользователей? Все на самом деле просто — добавить дополнительные возможности навигации.

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

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

Что следует принимать во внимание

(http://www.richard-hill.org.uk/)

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

В аналоговых клавиатурах легче манипулировать клавишами «вверх/вниз», чем «вправо/влево». А вот на тачпаде добавление новых жестов будет более удобным при реализации горизонтального скролла.

Скорость прокрутки также должна быть оптимизирована. Слишком быстрый скроллинг может вызвать головную боль, а слишком медленный может сильно раздражать.

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

В заключение

(http://www.archi-graphi.fr/)

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

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

Источник

Scroll Lock что это такое на клавиатуре

Рассматривая клавиатуру, мы можем остановить свой взгляд на клавише «Scroll Lock». По мнению некоторых пользователей она обладает непонятным функционалом, по сути бессмысленна, и лучше было бы вообще её изъять из признанного стандарта ПК-клавиатур. Но не спешите с выводами. В этой статье я расскажу об Scroll Lock, что это такое на клавиатуре, опишу историю этой клавиши и особенности её функционала.

Клавиша Scroll Lock

Что это – Scroll Lock на клавиатуре

Что же такое Scroll Lock? В переводе с английского «Scroll Lock» означает «заблокировать прокрутку». На клавиатуре стационарного компьютера данная клавиша размещена вверху справа, между клавишами Print Scr и Pause, а на ноутбуке она находится в разных вариациях, но обычно рядом с клавишей «Backspace». Аббревиатура её использования — ScLk, ScrLk, Slk.

История клавиши Scroll Lock

Данная клавиша впервые появилась на 83-кнопочной клавиатуре компьютера IBM PC/XT, в которой она применялась для остановки продвижения новой информации снизу экрана к верху. Тогда графического интерфейса пользователя ещё не существовало, а новая и свежая информация часто выводилась в самом низу экрана. При этом строчки новой информации сдвигали строчки старой наверх, а появление большого объёма свежих данных и скорость их прокрутки попросту не позволяли вовремя прочесть весь новый материал. С целью помочь пользователю в полной мере насладиться чтением свежей информацией и была реализована кнопка Scroll Lock. Нажатие на данную клавишу позволяло остановить прокрутку текста, и в полной мере насладиться изучением свежего массива данных. Повторное же нажатие вновь активировало ранее остановленный пользователем режим скроллинга.

Сегодня же данная клавиша Скрол Лок используется значительно реже и в ограниченном количестве программ.

Функционал Scroll Lock на клавиатуре

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

Для понимания, что это Scroll Lock нужно также знать, что она задействована в различных программах. Одна из наиболее популярных служебных программ – Microsoft Excel включением-выключением клавиши «скрол лок» позволяет прокручивать как табличную область самого документа, так и двигаться с помощью курсора между его ячейками.

Задействована данная клавиша и в консоли Unix-подобных систем Linux (функционал кнопки тот же что и первоначально – остановка прокрутки текста, а также включение дополнительной раскладки), в некоторых играх (в частности Казаки, The Elder Scrolls 4:Oblivion, MapleStory и др.) и служебных программах (Lotus Notes, FL Studio, Forté Agent и др.). Также она широко использовалась в Multiuser DOS, System Manager и Real/32, нажатие данной клавиши во время бутовой загрузки позволяло пользователю войти в специальный диагностический режим.

В известном браузере Opera нажатие на данную клавишу позволяет активировать режим голосовых команд (не забудьте перед тем установить голосовые библиотеки). Правда, для голосового управления в Опера пока доступен только английский язык и только под управлением ОС Windows.

Видео о предназначении Скрол Лок

Выше я постарался определить, что это такое Scroll Lock на клавиатуре. Первоначально, данная клавиша использовалась для комфортного просмотра быстро сменяющегося текста, ныне же её функционал позволяет переключаться между курсорной и экранной прокруткой. Я рекомендую попробовать функционал данной кнопки тем, кто ранее попросту «не замечал» её на своей клавиатуре – возможно, вы найдёте использование Scroll Lock весьма занимательным и полезным.

Источник

Что такое думскроллинг и колаб и почему они набирают популярность

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

Думскроллинг

Это слово вы могли не знать, но именно этим заниматься каждый вечер. Думскроллить (от английского doom — «гибель, судьба, рок, Судный день» и scrolling — «прокрутка») – стремиться пролистывать новостные ленты и сетевые ресурсы в поисках плохих новостей или любой информации, создающей негативную картину мира.

Фото: Кадр из фильма «Социальная сеть»

Само понятие появилось во время пандемии коронавируса и в последние годы стало крайне популярным.

Шеринг

Слово произошло от английского «share» — делить. Шерить — совместно использовать какие-то товары или услуги. В основе этого понятия лежит не только экономия денежных или временных ресурсов, но и забота об экологии.

Фото: Кадр из фильма «Маленькая мисс Счастье»

Какие виды шеринга популярны сегодня:

Узнать ещё немного новых слов можно в этом материале.

Антиваксер

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

Фото: Кадр из фильма «Адреналин»

Этимология слова до конца не известна, но ближе всего к правде те, кто называет его производным от простого «антивакцина».

Задонатить

Слово произошло от английского «donate» — жертвовать, дарить. В наших реалиях, задонатить — добровольно оказать материальную помощь в интернете, отблагодарить кого-то, безвозмездно перевести деньги.

Фото: Кадр из фильма «Заплати другому»

Ближе всего к определению «доната» подходят такие термины, как благотворительность, меценатство, спонсорство и пожертвование.

Байтить

Слово произошло от английского «to bite one’s style» — копировать чей-то стиль. Ещё одно слово, пришедшее из хип-хопа: подражать чьей-то манере. Байтят скорее стиль в целом, нежели отдельные элементы.

Фото: Кадр из фильма «Дьявол носит Prada»

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

Газлайтинг

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

Фото: Кадр из фильма «Газовый свет»

Своим появлением он обязан фильму «Газовый свет» 1944 года. По сюжету, коварный супруг манипулирует сознанием молодой жены, вынуждая её считать себя душевнобольной, чтобы завладеть наследством.

Всем хоть немного активным пользователям соцсетей попадалась на глаза эта надпись. Это сокращение было заимствовано из английского языка и расшифровывается как «Point of view», что переводится как «точка зрения».

Фото: Кадр из фильма «Ла ла ленд»

Слово появилось в TikTok, где ребята создают ролики, цель которых — передать настроение того или иного явления, фильма, исполнителя или игры. Позднее английское POV русифицировалось и превратилось в ироничное «плов». Смысл при этом не изменился.

Бинджвотчинг

Слово произошло в результате слияния английских слов «binge» — запой и «watch» — смотреть. На русский это переводится как «запойный просмотр».

Фото: Кадр из фильма «Бриджит Джонс: Грани разумного»

Биндж­вотчить — ждать, пока выйдет полный сезон любимого сериала, и смотреть его весь, запоем, освободив под это целый день или даже несколько.

Шипперить

Слова шипперинг и шиппер происходят от слова «relationship», что в английском языке обозначает отношения.

Фото: Кадр из фильма «Гарри Поттер и Дары Смерти: Часть I»

Шипперить – это представлять, что некая пара персонажей из книги, фильма или сериала состоит в романтических отношениях, а также фантазировать об этих отношениях.

Источник

Как победить scroll в javascript

А теперь плавно переходим к теме статьи. Ниже приведен список вопросов, которые я постараюсь осветить в данной заметке:

Как сделать таблицу с фиксированной шапкой и скроллом в body?

Как быть, когда cодержимое таблицы съезжает относительно шапки при появлении скролла? Установка css-переменной scroll-width.

Оптимизация и кастомизация скролла: плавность, scroll margin, изменение цвета и формы.

Как сделать таблицу с фиксированной шапкой и скроллом в body?

Начнем с того, что сделаем самую обыкновенную табличку и заполним ее данными из faker для наглядности. Получаем примерно такую картину(верстку делаем самую базовую, просто чтобы глаз не дергался от одного ее вида):

Код

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

Нужного нам результата можно добиться несколькими способами:

Использовать библиотеку по типу React-Table, React-Virtualized, либо какую-нибудь еще, чтобы вообще не заморачиваться. Настоятельно рекоммендую хотя бы с одной из них ознакомиться, поскольку они очень значительно облегчают жизнь разработчика при работе с таблицами.

Немного подшаманить CSS, чем мы сейчас и займемся

Это основная причина, почему я советую пользоваться библиотеками

Напоминалка про поведение атрибута height в таблицах

Здесь есть несколько выжных моментов, о которых не стоит забывать:

Меняя свойство display на ‘block’, мы как бы ломаем семантику, и наш браузер уже больше не считает нашу таблицу таблицей, что также оказывает влияние на скринридеры.

Теперь наш тег tr уже не занимает все свободное пространство контейнера и теперь нам нужно все это дело выровнять.

Для наглядности добавил border. Код

Как будем выравнивать?

Ну, я думаю, вы поняли

В общем, в любой непонятной ситуации используйте Flex или Grid и будет вам счастье. Ниже приведу два готовых базовых примера, html трогать не буду, но я думаю, что и так понятно, что можно сразу верстать на div и маркированных списках при желании. Дальше уже по ситуации можете довести до ума верстку, например: добавить ограничение таблицы по ширине, нужный вам формат переноса строк и адаптив, если конечно он нужен, так как все же в большинстве своем контент таблиц предназначен для использования на больших экранах. В любом случае, более продвинутая верстка легко гуглится.

Готовый вариант с display: ‘Flex’

Чуть не забыл отметить одну очень важную вещь, с которой я в свое время достаточно долго пытался разобраться: НА МАКАХ ЕСТЬ ФУНКЦИЯ АВТОМАТИЧЕСКОГО СКРЫТИЯ СКРОЛЛБАРА В БРАУЗЕРАХ, КОТОРАЯ ВЫКЛЮЧАЕТСЯ В НАСТРОЙКАХ. Если вы выставляете overflow: scroll, и ждете, что scroll теперь будет виден постоянно, то на маке он по умолчанию может пропадать и быть видимым только в момент прокрутки. Плюс на маках скролл у нас как бы парит в воздухе над контентом, аналогично position: absolute и не занимает места, если соответствующая настройка включена (по умолчанию она всегда включена).

Так выглядит на макбуке А вот так тот же код выглядит на windows

Да-да, получается что внешний вид скролла зависит также от операционной системы, а не только от браузера.

Глядя на результат для windows, мы плавно подходим к следующей теме.

Как быть, когда cодержимое таблицы съезжает относительно шапки при появлении скролла? Установка css-переменной scroll-width

Мы отчетливо видим, что на windows скролл при появлении съедает часть пространства, что в свою очередь приводит к тому, что контент нашей таблицы съезжает относительно шапки. Это лишь один из примеров, но есть и другие кейсы, когда скролл негативно влияет на качество верстки. Казалось бы, проблема очевидная, и наверняка должен быть способ как-то с этим бороться, однако, к сожалению, на данный момент есть только костыльные решения (во всяком случае я не нашел того, что бы меня устроило). Ниже я расскажу о самом распространенном варианте решения данной проблемы, плюс затрону относительно новое CSS свойство, которое должно потенциально избавить разработчиков от этой головной боли.

Ну что ж, приступим! Алгоритм прост и содержит всего лишь 2 шага:

Задаем для overflow-y значение scroll, чтобы в любом состоянии скролл у нас присутствовал в таблице (отмечу, что часто дизайнеры не в восторге от такого поворота событий, не по фэншую это всё и всю красоту портит).

Высчитываем ширину скролла в браузере и двигаем шапку на нужное расстояние.

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

Как посчитать размер скролла и положить его в css-переменную?

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

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

Применяя все вышеописанное к моему изначальному коду получаем:

В очередной раз хочу напомнить, что на маке ничего съезжать не будет по умолчанию, но если уж вы включите скролл в настройках, то предложенное мной решение также отлично отработает и всё будет ровненько.

Можно ли каким-то образом все-таки избежать использования overflow: scroll?

Ответ: в данной ситуации можно, нужно всего лишь немного усовершенствовать наш костыль.

Объявляем отдельный класс с нашим padding

Меняем overflow на auto (чтобы скролл появлялся только по необходимости)

При загрузке страницы определяем ширину шапки и body

Используем classnames, чтобы установить условие на добавление нашего новго класса к шапке: ширина body не должна быть равна ширине шапки (то есть мы добавляем сдвиг, только если в body есть scroll). Для удобства храним результат проверки в стэйте.

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

Заметка получилась уже довольно большой, но у нас осталась еще одна тема, потерпите еще немного, постараюсь написать чего-нибудь интересненького.

Оптимизация и кастомизация скролла.

Большую часть информации для данного раздела я подчеркнул из статей, автором которых является Josh W Comeau, всем рекоммендую посетить его вебсайт https://www.joshwcomeau.com/, там вы найдете очень много полезностей.

Добавляем плавность

Возможно, глядя на заголовок, кто-то из вас сейчас сидит в недоумении: ‘Плавность? Скролл ведь и так плавный, о чем ты?’. Так-то оно так, но я вот о что имею ввиду: все мы прекрасно знаем о том, что в html можно сделать ссылку-якорь, чтобы при клике на заголовок перемещаться к нужному фрагменту текста, самый базовый пример можно найти на всеми любимой википедии:

Как мы видим, перемещение происходит мгновенно, однако мы можем сделать этот переход плавным с помощью CSS (возможно это для вас конечно не новость, но кому-то точно будет полезно). Для этого нам нужно использовать вот этот кусочек кода:

Теперь то же действие на страничке википедии происходит таким образом:

Кстати говоря, если вдруг кто-то не знал, в Chrome devtools можно также добавлять media queries. Вот здесь можно найти подробную инструкцию о том, как это сделать: https://daveceddia.com/inspector-stylesheet-chrome/. Кейс супер редкий, но мало ли, вдруг понадобится.

На мой взгляд более плавное перемещение при клике на ссылку-якорь выглядит куда приятнее и позволяет лучше ориентироваться на странице, да и поддерживается достаточно хорошо, не работает лишь в Internet Explorer и SAFARI.

Отмечу также важный момент: если вы добавляете scroll-behavior: smooth в html, то имейте ввиду, что это автоматически также аффектит поведение метода window.scrollTo (тоже становится плавным), который используется, например, для того чтобы переместить пользователя наверх страницы в ответ на submit. Если вдруг вы раньше не сталкивались с этим методом, то обязательно ознакомьтесь и также не забудьте про метод scrollIntoView (разница между ними в том, что первый оперирует пикселями, а второй перемещает к конкретному элементу).

Scroll margin

Как мы видели на примере выше, при клике на ссылку-якорь наша страничка прокручивается таким образом, что нужный нам текст оказывается в самом верху экрана. Однако, если у нас имеется header со свойством position в значении sticky или fixed, то часть нужного нам контента обязательно заползет под него и нам придется после этого скроллить страничку вверх, чтобы этот самый контент стало видно.

Обратите внимание на заголовки

Здесь нам поможет использование свойства scroll-margin-top, которое определяет, где элемент должен находиться относительно верхней части окна при прокрутке. Со значением нужно поэкспериментировать и подобрать подходящее под вашу конкретную ситуацию.

Изменение цвета.

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

Возможно вы уже сталкивались со свойтвом scrollbar-color, которое позволяет изменить цвет скроллбара, только вот к сожалению поддерживается оно только браузером Firefox.

Это конечно здорово, но сразу возникает вопрос: ‘Есть ли альтернатива для остальных браузеров? ‘ Альтернатива есть и имя ей: Vendor-prefixes.

Однако, стоит отметить, что если мы изменим цвет таким образом, то результат будет достаточно топорным для остальных браузеров, так как мы затираем стандартные свойства скроллбара. Вот вам для примера сравнение результата в браузерах Chrome и Firefox:

Josh W Comeau просто лучший)

В дальнейшем попробую еще написать набольшую заметку про 2 другие интересные темы, касающиеся скролла: Cumulative Layout Shifts и Scroll Snapping.

Очень надеюсь, что вам было хоть немного полезно и интересно!

Источник

Кастомизация скроллбаров в браузере: компромисс между технологиями html, css, js и удобством использования

Приветствую всех!

Статья посвещена решению проблемы кастомизации скроллбаров браузера ради воплощения в жизнь амбициозных идей дизайнера. Статья расчитана на тех, кто свободно ориентируется в технологиях html, css, js, т.к. предлагаемое решение основано на их компромиссном использовании.

Intro. Возможности системного скрола.

Чтобы было от чего отталкиваться, я приведу простой пример (посмотреть в работе):

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

Решение имеет следующую структуру на html:

Scrollar — одновременно название решения и namespace, чтобы исключить пересечение стилей на целевой странице, где решение может быть использовано.

Основная тяжесть: операции Scroll и Resize

На мой взгляд, это самые «тяжелые» и неудобные в реализации на javascript операции. Почему? Чтобы программно реализовать Resize и сохранение пропорций нужно, в основном, обрабатывать событие window.onresize, а во время возникновения этого события — корректировать размеры и пропорции у нескольких элементов (чаще всего так…). Недостатком ресайза подобным образом является неплавное (с небольшими непостоянными, заметными глазу, шагами) изменение размеров элемента, кто пытался подобное отладить — поймет меня. Это сильно «напрягает» глаза, когда вкладываешь душу в разработку и стараешься довести работу всего интерфейса до идела.

Таким образом, чтобы сохранить максимальную плавность при изменении размеров элементов стоит использовать один из вариантов резиновой верстки блочных элементов с абсолютным позиционированием относительно друг друга и изменением размеров элементов за счет привязки к определенным координатам:

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

О Scroll. Для реализации scroll на desktop-браузерах необходимо обрабатывать событие колеса мыши и анализировать значения от этого события (также не забывать, что некоторые мыши позволяют листать контент в горизонтальной плоскости, а не только в вертикальной), а для mobile-браузеров нужно обрабатывать события группы touch. Т.е. для кроссплатформенного решения нужно программировать две эти реализации. Но лучше прокрутку контента возложить на сам браузер. Достаточно определить стиль для элемента systemscrolls:

Скрытие системных скроллбаров и 22px

Решая задачу прокрутки контента, я использовал свойство overflow:scroll, которое заставляет браузер отображать скроллбары всегда и тем самым предоставляет пользователю все удобства системной прокрутки. Но теперь нужно эти скроллбары скрыть. Здесь как раз и выручит viewport — этот блок будет скрывать всё, что выходит за его пределы. Это можно сделать двумя способами:

Первый вариант с overflow прост для понимания, но когда пользователь захочет выделить контент и начнет тянуть курсор в нужную сторону, то он, вполне вероятно, увидит системные скроллбары, т.к. при таком действии они вылезут из-под скрываемой области. Вариант с clip таким не страдает, но в этом случае пришлось применить небольшой хак и для поддержки ie7. Но это ещё не всё… Блок systemscrolls имеет такие же размеры, как и блок viewport, т.е. системные скроллбары еще видны. Здесь и используется ключевой момент «22px» — это величина, на которую будет скорректирован блок systemscrolls. Дело в том, что толщина скроллбаров у популярных браузеров менее 21px. Сама корректировка выглядит так:

После этого скроллбары будут скрыты и будут находиться за границами той области, которая обрезана с помощью clip.

И что в итоге? Браузер сам изменяет и следит за размерами всего элемента, контент легко и плавно прокручивается всеми описанными выше способами, а системные скроллбары скрыты. Но если это оставить в таком виде, то часть контента справа и снизу отображаться не будет…

Блок contentwrap

Основное и главное назначение блока contentwrap — это сделать так, чтобы в блоке viewport можно было увидеть блок content полностью: от одного края до другого при разных способах прокрутки.
До этого момента javascript не требовался, но сейчас он пригодится для того, чтобы скорректировать размеры блока contentwrap.

таким образом, размеры элемента contentwrap будут получаться из сложения этих величин с размерами блока content, и делать это будет нужно при каждом изменении размеров блока content. Есть исключения, но о них будет рассказано ниже.
Корректировка блока contentwrap с помощью js позволяет не обращать внимания на вид и версию браузера и используемую им толщину скроллбаров.

Блоки vscroll и hscroll

vscroll и hscroll — скроллбары. На данный момент, основная задача — «приклеить» их к краям и заставить их изменять свои размеры и местоположение их дочерних элементов за счет браузера:

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

Бегунки

Изменение положения бегунка при прокрутке контента

Это сделать крайне просто. Благодаря установленному свойству overflow:scroll у блока systemscrolls можно ловить собитие scroll на этом блоке, а уже при возникновении этого события двигать бегунок в зависимости от положения (свойства scrollLeft и scrollTop) контента относительно левой верхней точки блока systemscrolls с учетом коэффициента пропорциональности, который вычисляется в функции обновления параметров компонента (об этом будет ниже).

Перетаскивание бегунков

При втором способе можно получить гораздо лучший результат. Дополнительные операции по отсоединению и присоединению события systemscrolls.scroll происходят только два раза: на события mousemove и mouseup (соответственно) элемента document. Таким образом, обработка события document.mousemove происходить быстрее и оптимальнее (см. рисунок)

Обновление параметров компонента

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

Кастомизация

Кастомизация — это то, ради чего всё это и затевалось. Целью было: свести к минимуму усилия верстальщика и сэкономить время. После нескольких экспериментов со структурой элементов в скроллбаре приведенная ниже структура является более гибкой:

А если горизонтальный или вертикальный скрол не нужен?

Все просто: при инициализации компонента нужно указать какой скрол не нужен (по умолчанию — оба отображаются). Управление видимостью и скролов производится с помощью добавления или удаления классов. Также добавление этих классов влияет на размеры контента (например, при hscroll: false ширина контента будет меняться автоматически за счет нативного функционала браузера)

Как менять контент?

Ссылки к статье:

Customization — на этой странице можно посмотреть несколько вариантов кастомизации, а также можно опробовать реакцию элемента прокрутки на изменение размеров окна браузера.
GitHub — репозиторий, где можно найти всё, что описывалось в статье
Default style — пример произвольной стилизации
Safari style — стилизация скроллбаров в стиле Mac OS 10.8

Источник