Есть горизонтальная прокрутка: Горизонтальная прокрутка CSS: определение, и как убрать на всех разрешения

Горизонтальная прокрутка CSS: определение, и как убрать на всех разрешения

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

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

В общем, сегодня мы обсудим:

•  что такое горизонтальный скролл;

•  когда его можно использовать;

•  когда его лучше устранять;

•  как убрать горизонтальный скролл возможностями CSS.

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

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

Другое дело, когда горизонтальный скролл применяется в мобильных версиях веб-ресурсов. Копаясь в телефоне, удобно скроллить определенный контент «в сторону». Однако горизонтальный скролл оправдывается, когда реализован в отдельных блоках для удобства пользователя. Если, опять же, скроллится вся страница веб-сайта — это плохо.

Горизонтальный скролл CSS: особенности

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

Особенности горизонтального скролла:

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

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

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

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

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

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

Иногда вместо него используют блок с контентом и кнопкой «Показать еще». Таким образом, если пользователя заинтересует контент, ему нужно будет не скролить «в сторону», а просто нажать кнопку «Показать еще», и контейнер с контентом «развернется».

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

Как убрать горизонтальный скролл с помощью CSS

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

Горизонтальная прокрутка появляется в том случае, когда какой-то элемент «выходит» за область видимости контента страницы. У начинающих верстальщиков и веб-разработчиков это довольно частое явление. Чтобы избавиться от горизонтальной прокрутки, нужно «выскочивший» элемент «загнать» в область видимости или удалить. Если удалось «поправить» такой элемент, тогда хорошо. Если нет, потому что вы не можете его найти, тогда есть проверенное CSS-свойство «overflow».

Как убрать горизонтальный скролл в html, используя CSS-свойство «overflow»

Свойство «overflow» обрезает весь контент, выходящий за рамки блока, для которого оно назначено. То есть, если у вас образовалась горизонтальная прокрутка всей веб-страницы и вы не можете найти элемент, который ее провоцирует, тогда можно применить свойство «overflow» к элементу «html» и/или «body».

Код будет таким:

html {

overflow: hidden;

}

 

и/или

 

body {

overflow: hidden;

}

 

Нужно отметить, что свойство «overflow» — это общее свойство. Оно включает в себя:

•  overflow-х — свойство, отвечающее за горизонтальную прокрутку;

•  overflow-у — свойство, отвечающее за вертикальную прокрутку.

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

Заключение

Сегодня вы узнали, что такое горизонтальная прокрутка и как ее можно специально использовать. Если же она возникла случайно, тогда есть проверенный способ, как убрать горизонтальный скролл возможностями CSS — использовать свойство «overflow».

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

html — Убрать горизонтальный скролл

Задать вопрос

Вопрос задан

10 лет 11 месяцев назад

Изменён 4 года 2 месяца назад

Просмотрен 137k раза

Учусь верстать макет, графика выходит за пределы 1000px. Желательно сделать так, что бы на мониторе с разрешением экрана 1024x768px не появлялся горизонатальный скролл, а то, что не влезло, просто оставалось за пределами браузера. Как этого добиться?

• html
• css

Добавляем к блоку в котором нужно убрать скролл стиль (в CSS или напрямую)

overflow:hidden;
overflow-y:hidden;  /*для вертикального*/
overflow-x:hidden;  /*для горизонтального*/
<body>

• overflow

• overflow x

• overflow y

1

Всё очень просто пишем:

html{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
  body
  {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

#wrapper { width: 980px; overflow: show; }

Обычно такого хватает. #wrapper — обертка всего сайта, обычно идет следом за body

1

А ещё для IE<8 чтобы убрать прокрутку ничего кроме:

<body scroll="no">

не помжет!

контейнеру, в который не влазит контент добавить свойство overflow:hidden; это скроет непомещающиеся части.

если я правильно понял, то одно из свойств CSS вам должно помочь position: absolute. А также можно поиграться вот с этими свойствами max-width и min-width. Можно еще попробовать обернуть картинку в DIV и этому же DIV`у задать background, и указать размеры картинки которая задана фоном.

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

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

17 потрясающих веб-сайтов с горизонтальной прокруткой

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

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

Square

Изучение увлекательного веб-сайта Square подарит вам незабываемые впечатления. Это онлайн-платформа, где люди могут выставлять свои работы, и она выполнена в такой творческой манере. С самого начала вам предлагается изучить сайт с Давай Рок! Кнопка , нажатие на которую открывает ворота веб-империи, где вас приветствуют контрастные цвета, популярные анимированные GIF-файлы, изображения в стиле 90-х и синтезаторные мелодии. И все это происходит еще до того, как вы получите доступ к основному контенту.

Чтобы увидеть работы художников, сначала нужно перетащить квадрат с помощью мыши, пока он не достигнет финишной черты, обозначенной красной точкой. Когда вы катите квадрат, некоторые известные иллюстрированные персонажи появляются, чтобы составить вам компанию, например, Супер Марио, Дарт Вейдер, Эрик Картман, Бендер из Футурамы и т. д. Только после того, как вы завершите эту мини-игру, вы сможете увидеть избранные проекты.

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

Home Société

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

D. Potfer Studio

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

Квок Йин Мак

Сайт Квок Йин Мак — прекрасный оазис минимализма, который, несомненно, производит сильное впечатление на посетителей. Это еще один потрясающий пример одностраничного веб-сайта с горизонтальной прокруткой, которая в данном случае работает в обе стороны . Как только сайт загрузится, вы можете выбрать прокрутку влево или вправо . Основная навигация несколько спрятана в левом нижнем углу экрана. Но когда вы наводите курсор на About , Work и Guestbook , стрелка укажет вам, в каком направлении прокручивать, чтобы добраться до этих разделов. Благодаря использованию привлекательных фотографий, отличному выбору типографики, размеров шрифта и простых анимационных эффектов, Квоку удалось создать потрясающий веб-сайт, который прекрасно демонстрирует его творческий потенциал и навыки.

Prevint

Prevint — это программа предотвращения межличностного насилия, целью которой является повышение осведомленности о различных видах насилия, которым люди чаще всего подвергаются. Дизайнеры этого сайта выбрали горизонтальную навигацию, чтобы познакомить посетителей с тем, чем занимается их организация, и поделиться тремя спектрами, которые могут быть полезны людям, подвергшимся насилию. Этот веб-сайт является отличным примером того, как эффект горизонтальной прокрутки может быть отличным выбором, когда вы хотите представить своим пользователям некоторые общие идеи, но вам не обязательно придерживаться его на всем сайте . Фактически, здесь горизонтальная навигация исчезает в пользу эффекта прокрутки повествования, когда посетители нажимают, чтобы узнать больше о любом из спектров. Веб-сайт Prevint неоднократно награждался наградами и получил наград «Веб-сайт дня» наград CSS Design Awards, Awwwards и The FWA.

Каналы

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

Интерактивный каталог Qode

Мы создали интерактивный каталог Qode с целью продемонстрировать оригинальный подход к современному веб-дизайну. Каталог представляет собой тщательно подобранную подборку нескольких наших творческих тем, каждая из которых отличается своими эстетическими качествами, вдохновленными различными формами искусства. В этом проекте мы решили реализовать горизонтальную прокрутку, чтобы создать эффект прогулки по галерее и просмотра произведений искусства . Когда вы наводите курсор на название каждой рекомендуемой темы, вы мельком увидите ее дизайн. И, нажав на название, вы можете начать изучать страницу проекта темы. Здесь мы также сохранили боковую прокрутку, так как не хотели нарушать горизонтальную гармонию на отдельных страницах. Каталог QI получил несколько наград, в том числе признание «Сайт дня» от Awwwards, награду «Веб-сайт дня» от CSSDA и награду Webpicks от Communication Arts.

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

View Collection

Sahel

Элегантная мультиконцептуальная тема

Smiltė

Simple Portfolio WordPress Theme

Måne

Creative Portfolio Theme

1 000092 9 003

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

Peak’n Film

За Peak’n Film стоит Том Гарсен, французский фотограф и видеооператор. Этот удивительный веб-сайт представляет собой захватывающую демонстрацию захватывающих дух работ Тома. Все просто и минималистично, что позволяет его работам привлекать к себе внимание. В верхней части страницы есть индикатор выполнения, показывающий, как далеко вы продвинулись и сколько его изображений еще предстоит увидеть. Горизонтальный эффект плавный, работает как по волшебству в обоих направлениях и идеально дополняет портфолио Тома . Весь проект поразителен, отсюда и все награды, которые он получил на The FWA, Awwwards и CSS Design Awards.

Гоша Хиджакадзе

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

Gingko

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

Эмануэле Милелла

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

Myles Nguyen

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

Parsons Branding

Parsons Branding — студия дизайна и стратегии бренда из Кейптауна. На их веб-сайте вы можете выбирать между бесконечной каруселью и полным представлением проекта в виде сетки. Если вы выберете первый вариант (который установлен по умолчанию), вы сможете просматривать проекты студии с помощью горизонтальной прокрутки, тогда как последний предлагает бесконечное пространство для прокрутки, которое вы можете перемещать в любом направлении, которое пожелаете . Как только вы найдете проект, о котором хотите узнать больше, нажмите на него, чтобы открыть тематическое исследование. А когда вы дойдете до конца исследования, загрузится еще одно, посвященное другому проекту, и так далее, поддерживая идею преемственности, которая вездесуща на этом сайте.

Studio Björk

Веб-сайт Studio Björk — еще один яркий пример горизонтальной прокрутки, которая используется на каждой странице сайта . Этот сайт довольно минималистичный, в основном черно-белый, а более яркие цвета видны только на выставленных работах. Экран разделен на несколько разделов, каждый из которых соответствует одному проекту. Под каждой картинкой есть несколько основных сведений о рассматриваемой работе. Если вы хотите узнать о нем более подробно, щелкните в любом месте в границах раздела, где демонстрируется работа, а затем прочитайте подробное тематическое исследование о проекте.

Ciao Bella

Внимание, спойлер: Если вы еще не смотрели 4-й сезон La Casa de Papel , но планируете это сделать, вы можете пропустить этот сайт, так как он содержит большой спойлер.

Чао Белла был создан Netflix в честь Найроби, одного из главных героев популярного шоу La Casa de Papel . Сайт заполнен фотографиями, видео, письмами и аудиоконтентом, которые люди со всего мира присылают своим любимым персонажам. Контент отображается на весь экран, и вы можете перемещаться по нему, перетаскивая курсор в любом направлении. Когда вы найдете что-то, что хотели бы посмотреть, прочитать или послушать, просто нажмите на это . Затем вы можете перетаскивать мышь горизонтально, чтобы изучить контент, представленный в той же строке, и узнать, что еще фанаты и актеры сериала сказали о Найроби.

Vogue España

Интернет-издание Vogue España о моде 80-х представляет собой одностраничник, освещающий все основные модные тенденции эпохи синти-попа, гетры и кефали. Вы можете перемещаться по графическому и текстовому контенту в стиле 80-х, используя горизонтальную навигацию, и именно этот эффект придает всему веб-сайту отчетливое ощущение лукбука .

Заключительные мысли

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

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

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

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

Горизонтальная прокрутка: краткое определение

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

Когда использовать горизонтальную прокрутку?

1. Отображение нескольких изображений (например, для сайта фотографии или портфолио дизайнеров)

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

3. Отображение отдельных разделов или слайды с информацией о приложениях

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

Передовой опыт

Не используйте горизонтальную прокрутку на полных веб-страницах

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

Горизонтальные полосы прокрутки должны быть спроектированы как вертикальные полосы прокрутки

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

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

Должны быть предложены другие методы взаимодействия

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

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

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

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

Итак, как вам поможет включение горизонтальной прокрутки на ваш сайт?

• Дизайн почти на 100 % согласован на всех устройствах.
• Он экономит много места на экране по вертикали, поскольку предназначен для размещения вторичной информации, которая не занимает область страницы.
• Позволяет пользователям просматривать параметры в категории, проводя пальцем в сторону или прокручивая вниз, чтобы увидеть разные категории.

  No related posts.