Горизонтальный скролл что это

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

Ширина макета 1366px, задала ширину ограничивающему контейнеру такую же — 1366px (верстаю макет desktop first впервые, до этого верстала только mobile first на курсах, при верстке mobile first нас учили задавать контейнеру для страницы ширину вьюпорта). Появляется горизонтальный скролл. В этой статье https://yoksel.github.io/bad-practices/containers/ говорится что нельзя задавать контейнеру ширину вьюпорта, но я раньше задавала и скролла не появлялось.Пробовала задать контейнеру ширину контента, хоть и в каждом блоке она разная, выбрала максимальную ширину, которая была в шапке- 1170px. Убрала все паддинги. Но и это не помогло, скролл никуда не делся. Что я делаю не так?

.page__body < background-color: $white; color: $dark-blue; font-family: "Montserrat", "Arial", sans-serif; font-weight: 400; font-size: 16px; line-height: 23px; min-width: 320px; margin: 0 auto; position: relative; >.page__container

Макет:

Отслеживать
задан 10 мая 2023 в 18:38

На самом деле все кто вам ответит, просто будут гадать, но обычно в этом виноват margin или border. внизу вон вам правильно посоветовали использовать box-sizing: border-box; — он включает в свою ширину разные border-ы, отступы(но не margin). Также нажав «CTRL + Shift + C» можно отследить, какой элемент выбивается за грани положенного.

11 мая 2023 в 4:26
@ЕвгенийЛи, а где эту комбинацию использовать?
11 мая 2023 в 8:55
@OliverPatterson на странице браузера
11 мая 2023 в 9:10
@ЕвгенийЛи, оно просто вызывает devTools?
11 мая 2023 в 10:22

@OliverPatterson devTools это F12, а то что я написал — это одна из возможностей его, с которой можно просматривать элементы на странице просто водя курсором.

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

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

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

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

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

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

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

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

1. Горизонтальный скролл очень часто является единственно возможным адекватным решением для мобильной версии. Поддержка принципиально разных версий внешнего вида одного и того же блока для разных версий отображения(веб, планшет, мобильная) — сложно не только для дизайна, но и для разработки. Такие решения нельзя назвать оптимальными.
2. Это решение позволяет показать большое количество контента, не перегружая страницу. Например, при отображении изображений в галерее горизонтальная прокрутка позволяет пользователю увидеть небольшую часть. Это дает возможность быстро понять, релевантна ли эта информация его запросу.
3. Горизонтальная прокрутка экономит много места на вертикальном экране. Макет гораздо более гибкий, ведь добавлять контент можно в обоих направлениях — вертикальном и горизонтальном.
4. Горизонтальная прокрутка позволяет пользователям просматривать намного больше разной по смыслу информации, поэтому ее часто используют на главной и разводящих страницах.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Горизонтальный скролл со стрелками в zero block

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

Как сделать

1. Создай отдельно zero block с элементами, которые нужно скроллить. В настройках поставь overflow: auto.
2. Создай отдельно zero block со стрелками. Каждая стрелка — это шейп. Для шейпа со стрелкой налево укажи класс arrow-left, для шейпа со стрелкой направо укажи класс arrow-right. Инструкция по добавлению своего класса элементу.
3. Укажи настройках ниже id блока с элементами, id блока со стрелками и величину сдвига при клике на стрелку.
4. Скопируй сгенерированный код и вставь на свой сайт. Памятка по вставке кода.

   .scrollbooster-viewport < cursor: -webkit-grab; cursor: grab; padding-bottom: 30px; margin-bottom: -30px; >.scrollbooster-viewport:active < cursor: -webkit-grabbing; cursor: grabbing; >.scrollbooster-content < position: absolute; width: 100%; height: 100%; >.arrow-left, .arrow-right 

Горизонтальный скролл: что с ним не так?

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

Чем заменить этот паттерн

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

Загрузка меньшего количества элементов и ссылка на страницу каждой категории

Таким образом, контент не скрывается. Легко перейти к категории; данные не тратятся зря; и вы избегаете нетрадиционных, трудоемких паттернов.

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

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

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

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

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

«Но это потребует больше кликов»

Не стоит переживать, что разделение контента по страницам увеличит количество кликов.

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

Вывод

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

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

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