Скролл горизонтальный: Горизонтальный скролл. Когда и где использовать | by Ksenia Toloknova | BehanceRussia

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

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

Примеры использования слайдеров на сайтах https://yandex.ru/ https://www.ivi.ru/ https://www.raiffeisen.ru/ и https://junior.mts.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Слева — официальный сайт Мегафона, справа — приложение Facebook

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

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

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

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

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

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

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

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

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

Этот паттерн доступен, адаптивен и согласован для всех размеров экрана. И его довольно легко реализовать.

Он имеет много плюсов, несмотря на то, что имеет ряд критических недостатков.

В этой статье я объясню их и посоветую, чем его заменить.

Горизонтальный скролл программ по категориям

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Запомните, что количество кликов – плохой показатель юзабилити.

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

Вывод

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

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

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

Спасибо Amy за редактуру статьи.

---

Перевод статьи adamsilver.io

html — Горизонтальная прокрутка css?

спросил 9 лет, 5 месяцев назад

Изменено 7 лет, 4 месяца назад

Просмотрено 160 тысяч раз

Я хочу иметь один

Благодаря http://jsfiddle.net/clairesuzy/FPBWr/

Проблема с этими 530px. Вместо этого я хотел бы использовать 100%. Но затем я получил прокрутку страницы, и прокрутка DIV идет правильно, не могу понять, есть идеи?

Вот статья на сербском о решении http://www.blog.play2web.com/index.php?id=18

• html
• css
• overflow

Просто установите для ширины значение auto:

 #myWorkContent{
    ширина: авто;
    высота: 210 пикселей;
    граница: 13px сплошная #bed5cd;
    переполнение-x: прокрутка;
    переполнение-y: скрыто;
    пробел: nowrap;
}
 

Таким образом, ваш div может быть как можно шире, чтобы вы могли добавить как можно больше изображений котят ;3

Ширина вашего блока div будет увеличиваться в зависимости от содержащихся в нем дочерних элементов.

jsFiddle

2

Ниже у меня сработало.

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

Родительский CSS:

 .divParentClass {
    ширина: 200 пикселей;
    высота: 100 пикселей;
    переполнение: прокрутка;
    пробел: nowrap;
}
 

Дети CSS:

 .divChildClass {
    ширина: 110 пикселей;
    высота: 200 пикселей;
    отображение: встроенный блок;
}
 

Для горизонтальной прокрутки:

 overflow-x: scroll;
переполнение-y: скрыто;
 

Для вертикальной прокрутки:

 overflow-x: скрыто;
переполнение-у: прокрутка;
 

Просто убедитесь, что вы добавили box-sizing:border-box; на ваш #myWorkContent .

http://jsfiddle.net/FPBWr/160/

1

использовать max-width вместо width

max-width:530px;

демо: http://jsfiddle.net/FPBWr/161/

Я понял так:

 * { padding: 0; поле: 0 }
тело { высота: 100%; пробел: nowrap }
HTML {высота: 100%}
.red {фон: красный}
.синий {фон: синий}
.
 
 желтый {фон: желтый}
.header {ширина: 100%; высота: 10%; положение: фиксированное }
.обертка {ширина: 1000%; высота: 100%; фон: зеленый }
.страница {ширина: 10%; высота: 100%; плыть налево }
<дел>
<дел>
    <дел>
    <дел>
    <дел>
    <дел>
    <дел>
    <дел>
    <дел>
    <дел>
    <дел>
    <дел>

 
 
 
Карточка
 
 
Карточка
 
 
Карточка
< /div> 
 
Карточка
 
 
Карточка
 
 
Карточка
 
 
Карточка
 
 
Card
 
 
Card
 
 
 
 

 .scrolling-wrapper { 
 переполнение-x: прокрутка; 
 переполнение-у: скрыто; 
 пробел: nowrap; 
 .card { 
 дисплей: встроенный блок; 
 } 
 } 
 

 .scrolling-wrapper-flexbox { 
 display: flex; 
 flex-wrap: nowrap; 
 переполнение-х: авто; 
 .card { 
 flex: 0 0 авто; 
 } 
 } 
 

 .scrolling-wrapper { 
 -webkit-overflow-scrolling: touch; 
 } 

 .scrolling-wrapper { 
 &::-webkit-scrollbar { 
 display: none; 
 } 
 }