Горизонтальная прокрутка в веб-дизайне: стоит ли ее использовать?
Что такое горизонтальная прокрутка?
Недостатки горизонтальной прокрутки
Это нарушает ожидания пользователей.
У него высокая стоимость взаимодействия.
Его легко упустить или проигнорировать.
Это создает проблемы для доступности.
Когда работает горизонтальная прокрутка
Чтобы скрыть вторичный контент
Отображение предложений по категориям
Навигация по большому изображению или визуальному элементу
Рекомендации по горизонтальной навигации
1 Избегайте горизонтальной прокрутки полных веб-страниц.
2 Включите другие методы взаимодействия.
3 Создайте горизонтальные полосы прокрутки как вертикальные полосы прокрутки.
4 Сделайте вариант горизонтальной прокрутки визуально заметным.
Как создать контейнеры с горизонтальной прокруткой в HTML и CSS
Как отключить горизонтальную прокрутку
Прокрутка вбок
Когда вы думаете о «прокрутке» веб-сайтов и приложений, в первую очередь, вероятно, приходит на ум одно направление: вниз.
В этом есть смысл – практически каждая веб-страница структурирует свое содержимое по вертикали. Чтобы увидеть больше, просто прокрутите вниз с помощью мыши, трекпада или клавиатуры. Некоторые веб-сайты могут попытаться улучшить взаимодействие с пользователем с помощью анимированных всплывающих элементов или эффектов параллакса. Даже в этом случае ориентация прокрутки почти всегда остается вертикальной.
Вертикальная прокрутка работает отлично … но как насчет ее аналога по оси X, горизонтальной прокрутки? Вы могли подумать о добавлении этой более редкой функции на свой сайт. Но является ли метод горизонтальной прокрутки интуитивно понятным или даже полезным? Это лучше вертикальной прокрутки? И как это может обогатить ваш UX?
В этом посте я отвечу на все эти вопросы, а затем покажу вам, как создать базовую горизонтальную прокрутку с помощью пользовательского HTML и CSS, если вы считаете, что это хорошо подходит для вашего сайта.
Что такое горизонтальная прокрутка?
Горизонтальная прокрутка – это метод навигации по странице, при котором пользователь прокручивает влево и вправо, чтобы открыть содержимое по бокам окна или контейнера.
Горизонтальную прокрутку можно выполнить, щелкнув и перетащив горизонтальную полосу прокрутки, проведя вбок на трекпаде рабочего стола или мышью трекпада, нажав клавиши со стрелками влево и вправо или проведя пальцем в сторону на сенсорном экране.
В то время как вертикальная навигация является основой подавляющего большинства веб-сайтов, мы видим горизонтальную гораздо реже. Это связано с тем, что горизонтальная прокрутка широко считается неэффективным и устаревшим методом пользовательского интерфейса, имеющим мало практических применений.
Это может показаться немного резким, поэтому давайте расширим его и обсудим, почему вы, вероятно, не слишком часто прокручиваете в сторону.
Недостатки горизонтальной прокрутки
Мнения о горизонтальной прокрутке неоднозначны как среди веб-дизайнеров, так и среди веб-пользователей. Даже я сам не слишком увлечен этим по нескольким причинам:
Это нарушает ожидания пользователей.
Вертикальная прокрутка – это норма навигации.
За исключением редких стилистических украшений, каждая веб-страница структурирует свое содержимое по вертикали. Поэтому, естественно, пользователи будут ожидать прокрутки таким образом, а не слева направо.
Это нормально – время от времени нарушать правила дизайна, чтобы добавить визуального чутья и изюминки. Но игнорирование этой конкретной конвенции без четкой цели смутит и расстроит посетителей больше, чем увлечет. И многие просто предполагают, что ваша страница / элемент страницы сломан.
А как насчет сенсорных экранов? В то время как появление интеллектуальных мобильных технологий нормализовало жесты бокового смахивания (глядя на вас, Tinder), пользователи, естественно, будут прокручивать мобильный веб-сайт вниз, если их не попросят. Таким образом, обычно лучше оставить вертикальную прокрутку как на настольных, так и на мобильных сайтах.
У него высокая стоимость взаимодействия.
С точки зрения UX, стоимость взаимодействия – это количество усилий, которые требуется пользователю для выполнения действия, такого как взаимодействие с элементом страницы.
Стоимость взаимодействия складывается из (1) того, насколько усердно нам приходится думать о задаче и (2) физических усилий, необходимых для выполнения задачи.
Вертикальная прокрутка имеет низкую стоимость взаимодействия. Опять же, мы этого ожидаем, поэтому нам не нужно думать, чтобы это сделать. Вертикальная прокрутка также эргономично эффективна благодаря колесу мыши, трекпаду или клавишам со стрелками.
Горизонтальная прокрутка, напротив, требует гораздо более высоких затрат на взаимодействие.
Мысленно мы должны приспособиться к новой ориентации прокрутки и обрабатывать ввод контента с нового направления экрана. Мы не привыкли к дополнительной когнитивной нагрузке, и это негативно сказывается на наших впечатлениях от просмотра. Пользователи, которым нужна горизонтальная полоса прокрутки, также должны найти этот элемент, что требует дополнительной работы.
Горизонтальная прокрутка также требует больших физических усилий от пользователей. Пользователи трекпада и мобильных устройств могут проводить пальцем в сторону, чтобы открыть контент, но это невозможно для пользователей настольных компьютеров, оснащенных стандартной мышью.
Эти пользователи должны либо перейти к клавишам со стрелками, либо щелкнуть и перетащить полосу прокрутки.
Его легко упустить или проигнорировать.
Эта проблема возникает из-за отсутствия ожиданий – если пользователи не знают, что на веб-странице появляется горизонтальная навигация, они не будут ее искать, упуская из виду потенциально релевантный контент.
Четкие визуальные подсказки для горизонтальной навигации, такие как значки стрелок или информационный текст, могут частично решить эту проблему. Но есть шанс, что пользователи его упустят. Если они действительно замечают реплики, им все равно может быть не ясно, что на самом деле представляет собой скрытый контент. В этом сценарии большинство просто не будет беспокоиться о взаимодействии с контентом за пределами области просмотра.
Это создает проблемы для доступности.
Дополнительный размер прокрутки усугубляет трудности простой вертикальной прокрутки, особенно когда оба используются одновременно. Элемент страницы с горизонтальной и вертикальной прокруткой может дезориентировать, и его трудно использовать людям с двигательными нарушениями.
Для людей с физическими ограничениями, умственными ограничениями или просто меньшим опытом работы с технологиями горизонтальная прокрутка часто является ненужным препятствием, которого можно избежать с помощью лучшего дизайна.
Когда работает горизонтальная прокрутка
Учитывая проблемы с горизонтальной прокруткой, вы можете задаться вопросом, будет ли когда-нибудь такая функция полезной.
Но пока не исключайте этого. Есть несколько случаев, когда горизонтальная прокрутка может быть эффективной, если ее реализовать осторожно и точно. Давайте теперь рассмотрим его наиболее распространенные применения:
Чтобы скрыть вторичный контент
На любом веб-сайте вы хотите минимизировать количество прокруток, которые пользователи должны выполнять, чтобы достичь желаемого контента. Здесь может пригодиться горизонтальная прокрутка: вы можете сэкономить вертикальное пространство страницы, разместив специальный элемент, который показывает связанный контент из горизонтальной прокрутки.
Большинство реализаций этого метода четко указывают на функцию прокрутки и предлагают альтернативный метод навигации, такой как нажатие кнопки, для отображения большего количества контента. Например, пользователи могут горизонтально прокручивать галерею изображений или ссылки на миниатюры на сообщения в блогах или новостные статьи.
Отображение предложений по категориям
Кстати, контейнеры с горизонтальной прокруткой полезны для сегментирования контента по категориям. Пользователи прокручивают вертикально, чтобы найти интересующую их категорию, а затем вбок, чтобы найти конкретный продукт, видео, статью или другой тип элемента в этой категории.
Сайты электронной торговли используют этот метод для разделения своего каталога на типы товаров. Стриминговые платформы делают то же самое со своими фильмами и сериалами. Посмотрите, как Netflix интегрирует горизонтальную прокрутку в свой пользовательский интерфейс:
Источник изображения
Также обратите внимание, что этот пример предлагает альтернативу прокрутки – кнопки со стрелками.
Навигация по большому изображению или визуальному элементу
Иногда один элемент может быть слишком большим для вашей страницы, и вы хотите уместить его в меньший элемент окна. Карты, изображения с большим количеством деталей и растянутые визуализации, такие как временные шкалы, – все это представляет собой проблему дизайна. Чтобы помочь пользователям перемещаться и исследовать большую 2D-плоскость, рассмотрите возможность использования горизонтальной прокрутки.
Однако обратите внимание, что в настоящее время метод перетаскивания более распространен, чем двойная вертикальная и горизонтальная прокрутка. Пользовательское тестирование полезно для определения того, какой подход лучше всего подходит для вашего конкретного экземпляра. В любом случае, эти большие визуальные элементы должны быть доступны для навигации с помощью клавиатуры.
Рекомендации по горизонтальной навигации
- Избегайте горизонтальной прокрутки на полных веб-страницах.
- Включите другие методы взаимодействия.
- Создавайте горизонтальные полосы прокрутки как вертикальные полосы прокрутки.
- Сделайте вариант горизонтальной прокрутки визуально заметным.
Итак, вы думаете, что горизонтальная навигация имеет место на вашем сайте? Вот несколько рекомендаций, о которых следует помнить:
1 Избегайте горизонтальной прокрутки полных веб-страниц.
Горизонтальная прокрутка никогда не должна заменять вертикальную прокрутку на всей веб-странице. Нарушение этого правила оттолкнет большинство пользователей.
Если вы хотите, чтобы разные разделы вашей главной страницы переходили по горизонтали, рассмотрите возможность запуска горизонтальной анимации с вертикальной прокруткой, как показано на этом впечатляющем веб-сайте дизайнерского агентства :
Источник изображения
В этом примере пользователь выполняет прокрутку вниз. Поначалу появление СМИ справа неожиданно, но вы быстро улавливаете, что происходит.
2 Включите другие методы взаимодействия.
Даже если на вашей странице используется горизонтальная прокрутка, мы рекомендуем дать пользователям настольных компьютеров еще один способ раскрыть скрытый контент. Кнопка со стрелкой может иметь ту же функцию:
Источник изображения
Мобильные пользователи будут испытывать меньше проблем с боковым смахиванием, поэтому кнопки на мобильных сайтах не нужны. Тем не менее, основная ориентация прокрутки должна оставаться вертикальной на устройствах с сенсорным экраном.
3 Создайте горизонтальные полосы прокрутки как вертикальные полосы прокрутки.
На рабочем столе горизонтальные полосы прокрутки должны быть доступны в своих контейнерах. Горизонтальные полосы прокрутки должны выглядеть и работать так же, как их вертикальные аналоги, для единообразия дизайна. Избегайте нестандартных стилей полос прокрутки, так как они помогают и не должны отвлекать внимание.
Есть несколько исключений для размещения видимых полос прокрутки. Если с обеих сторон контейнера есть кнопки, которые позволяют пользователям прокручивать, пользователи могут щелкать по ним вместо перетаскивания полосы прокрутки.
Кроме того, не показывайте полосу прокрутки, если содержимое контейнера возвращается к началу в конце потока содержимого.
4 Сделайте вариант горизонтальной прокрутки визуально заметным.
Обязательно минимизируйте вероятность того, что посетители пропустят ваш контент, сообщив о возможности горизонтальной прокрутки.
В дополнение к индикаторам кнопок, таким как стрелки, вы можете настроить прокручиваемые контейнеры так, чтобы при наведении курсора мыши появлялась горизонтальная полоса прокрутки.
Или попробуйте показать фрагмент скрытого содержимого в прокручиваемом контейнере. Сайты электронной коммерции, такие как Patagonia, делают это для списков продуктов – обратите внимание на миниатюры продуктов, торчащие с обеих сторон контейнера для дисплея:
Источник изображения
Наконец, также подойдет текст с инструкциями, например «Прокрутите, чтобы узнать больше». Попробуйте все эти реализации при создании прототипов и тестировании.
Как создать контейнеры с горизонтальной прокруткой в HTML и CSS
Когда элемент HTML – скажем,
– содержит контент, выходящий за его границы, это называется переполнением.
Например, на стандартной веб-странице все содержимое ниже сгиба переполняется в окне браузера.
Чтобы включить горизонтальную прокрутку, мы можем использовать свойство CSS overflow-x
В этом примере я создал контейнерный элемент
шириной 500 пикселей. Внутри этого контейнера
находится дочерний элемент
с установленной шириной 1000 пикселей. Поскольку ширина
превышает ширину
, текст выливается за край справа от контейнера. Установка
отображает внутри него полосу прокрутки.
Вот HTML-код моего примера:
<!DOCTYPE html> <html> </head> <body> <div> <p> (Your text goes here. Also, you can place other elements within this parent div. </p> </div> </body> </html>
А вот соответствующий CSS-код:
div {
background-color: lightblue;
border: 1px solid black;
height: 100px;
width: 500px;
overflow-x: scroll;
}
p {
width: 1000px;
margin: 10px;
}
Хотите конкретизировать причудливый элемент горизонтальной прокрутки? CSS Tricks, Codeburst и UX Collective предлагают подробные руководства, на которые вы можете ссылаться для создания пользовательских контейнеров.
Как отключить горизонтальную прокрутку
Если вы не установите ширину дочернего элемента в его родительском
, содержимое дочернего элемента будет перенесено на следующую строку, избегая переполнения. Вы также можете установить для свойства CSS overflow-x значение hidden, что предотвращает перенос дочернего содержимого в его контейнер, но отключает боковую прокрутку.
div { overflow-x: hidden; }
Другое решение – установить ширину дочерних элементов на 100%. Это указывает дочернему содержимому переходить к следующей строке, чтобы избежать обрезки краем контейнера, независимо от ширины контейнера.
p { width: 100%; }
Прокрутка вбок
Для большинства из нас вертикальная прокрутка – это рефлекс, просто она имеет больше смысла, чем ее горизонтальная альтернатива. Однако горизонтальная прокрутка все же нашла место в современном веб-дизайне. При умеренном и преднамеренном внедрении этот метод может помочь структурировать ваши страницы и представить контент в удобной форме.
В конечном итоге вы разрабатываете для обычного посетителя, поэтому удобство использования предшествует любым стилистическим украшениям. Если у вас есть сомнения относительно элементов горизонтальной прокрутки, проверьте их на реальных пользователях (а не на других дизайнерах). Если обратная связь отрицательная, не бойтесь прибегнуть к другому подходу.
Источник записи: https://blog.hubspot.com
Остерегайтесь горизонтальной прокрутки и имитации управления жестами для десктопов
Резюме: даже сейчас, когда все больше целевых страниц и сайтов имитируют управление жестами и горизонтальную прокрутку при отображении на десктопах, пользователи таких устройств по-прежнему неохотно просматривают контент при помощи боковых движений мыши или пальцев по тачпаду.
Специалисты Nielsen Norman Group (NNG), изучая проблему веб-юзабилити, отметили любопытный феномен, наблюдающийся в течение нескольких последних лет: горизонтальная прокрутка остается проблемой для пользователей настольных компьютеров. Даже с широким внедрением мобильных устройств, где жесты используются для просмотра веб-контента методом скольжения пальца (свайпинг, от англ. swipe), пользователи десктопов в большинстве не приемлют горизонтальную прокрутку web-страниц.
В данном посте мы рассмотрим некоторые проблемы юзабилити, связанные с горизонтальным скроллингом, присущим устройствам с сенсорным экраном, при имплементации его на веб-ресурсы, отображаемые на мониторах ПК.
Почему обращаются к горизонтальной прокрутке
Совместимость (адаптивность) страницы с различными типа устройств
Просмотр несущественного содержимого
Сохранение вертикального пространства экрана
Демонстрация характерного дизайна
Риски применения горизонтальной прокрутки на десктопе
Советы по имплементации горизонтальной прокрутки или свайпинга на веб-страницу для ПК
1. Не позволяйте «свайпить» первичную навигацию
3. Создайте очевидные, всегда видимые сигналы для свайпинга
Вывод
Почему обращаются к горизонтальной прокрутке
Доминирующим стандартом для перемещения по длинным лендингам или «портянкам» у пользователей настольных компьютеров является традиционный скроллинг (прокрутка по вертикали).
Обычная компьютерная мышь с колесиком прокрутки позволяет простым перемещением вверх-вниз оценить оффер на продающей целевой странице или объемную статью, размещенную в блоге, тем самым позволяя получить полную релевантную картину предлагаемого веб-контента.
Маркетологи и веб-дизайнеры, умышленно нарушающие устоявшиеся правила, делают это по одной из следующих причин:
Совместимость (адаптивность) страницы с различными типа устройств
Те же эксперты NNG отмечают, что пользователи мобильных устройств с сенсорным экраном воспринимают горизонтальную прокрутку как нечто само собой разумеющееся.
Разработчики и маркетологи, применяющие адаптивный дизайн для своих лендингов/сайтов, используют метод горизонтального скроллинга или же свайпинга контента для всех устройств, на которых должна отображаться веб-страница, включая настольные компьютеры. Подобный подход применяется просто потому что единый дизайн, подходящий для отображения контента на различных типах дисплеев, обходится дешевле в разработке и внедрении, а также — предположительно! — предполагает максимальную совместимость лендинга со всевозможным «аппаратным парком» целевой аудитории.
Однако владельцы ПК, не привыкшие к горизонтальной прокрутке, зачастую не имеют понятия, что какую-то часть содержимого страницы они могут обнаружить с помощью свайпинга на большом мониторе. Поскольку люди взаимодействуют с мобильными и настольными устройствами абсолютно по-разному — отметим, что поведенческие паттерны для обоих случаев «прошиваются» буквально на уровне рефлексов пользователей! — то универсальный подход типа «один размер подходит всем» (one-size-fits-all) может привести к неприятным последствиям.
Ключевой момент здесь заключается в так называемой прерывности пользовательского опыта: просматривая один и тот же веб-ресурс, сперва с мобильного устройства, а затем с монитора ПК, один и тот же человек парадоксальным образом будет демонстрировать 2 различных поведенческих паттерна — пользуясь смартфоном или планшетом, он уверенно будет «свайпить» страницу по горизонтали, а устроившись у десктопа, он будет скроллить ее вертикально вниз до упора, надеясь найти продолжение контента.
Разумеется, он вспомнит недавно совершенные действия и прибегнет к горизонтальной прокрутке, но лишь потому, что уже посещал этот ресурс, пользуясь мобильным устройством.
Если же владелец ПК впервые заходит на посадочную страницу/сайт, оснащенные горизонтальной прокруткой, то он наверняка не увидит значимой части содержимого.
- Оптимизируйте пользовательский опыт — не только конверсию
Просмотр несущественного содержимого
Не слишком важный для коэффициента конверсии материал — типа изображений в фотогалерее — вполне может быть снабжен механизмом горизонтальной прокрутки, позволяющим посетителю видеть небольшую выборку контента. Это даст ему великолепную возможность либо быстро «свайпнуть» галерею, либо нажать на значок увеличения для просмотра заинтересовавшего изображения.
Убедитесь, что вы не поместили критически важный контент на горизонтальную прокрутку: не каждый посетитель обнаружит его.
Сохранение вертикального пространства экрана
Вместо того, чтобы отображать весь контент на очень длинной странице, можно воспользоваться макетом, позволяющим свайпинг для подачи информации «мелкими дозами».
Горизонтальная прокрутка, дополняющая традиционный скроллинг, делает дизайн страницы очень гибким и адаптивным: контент можно добавлять, соответственно, как по горизонтали, так и по вертикали.
Hulu.com: дизайн сайта предусматривает как вертикальный, так и горизонтальный скроллинг
Демонстрация характерного дизайна
Дизайнеры, художники и разного рода цифровые агентства используют горизонтальную прокрутку на своих сайтах для того, чтобы выделиться среди всех прочих и показать потенциальным клиентам свои навыки и умения.
Если же ваш бизнес относится к какой-либо широко распространенной категории (то, что называется английским термином «mainstream»), то применение свайпинга для вас может стать роковой ошибкой.
- Примеры юзабилити пользовательского интерфейса
Риски применения горизонтальной прокрутки на десктопе
Как убрать горизонтальную полосу прокрутки на сайте? Безусловно, она приемлема в некоторых ситуациях, но должна применяться с осторожностью.
Судя по отчетам NNG, горизонтальная прокрутка на рабочем столе является одной из веб-интеракций, неизменно вызывающих у респондентов отрицательные реакции.
Хотя свайпинг на десктопе не вызывает такой же уровень негативации, как традиционная горизонтальная полоса прокрутки (scrollbar, скроллбар), он тоже представляет собой довольно рискованный метод взаимодействия пользователя с веб-интерфейсом.
Рассмотрим 3 главные причины, по которым горизонтальная прокрутка и свайпинг создают проблемы для владельца ПК.
1. Традиционная горизонтальная полоса прокрутки обременяет пользователя, требуя для непрерывного скроллинга постоянного внимания и больших физических усилий.
Большинство пользователей для горизонтального перемещения использует скроллбар, а не стрелки прокрутки — это, вроде бы, облегчает выполнение задачи. Тем не менее, двигаться по «узкому туннелю» полосы прокрутки трудно, потому что подобное действие требует от пользователя тщательного управления курсором мыши для движения слайдера («ползунка») по скроллбару.
Здесь мы имеем дело с частным случаем «закона вождения» (steering law), гласящего, что время, необходимое пользователю для перемещения указывающего устройства (слайдера, в нашем случае) через условный тоннель, зависит от длины и ширины тоннеля: чем он уже и длиннее, тем больше времени это займет у пользователя.
Из чего следует вывод: использование горизонтальной полосы прокрутки имеет так называемую «высокую стоимость взаимодействия» (high interaction cost), что отталкивает пользователей от завершения действия. Как заявил один из участников экспериментов по применению горизонтального скроллинга: «Мне кажется, что на прокрутку у меня ушла целая вечность!».
- Минимизируйте когнитивную нагрузку для оптимизации юзабилити
2. Пользователи могут игнорировать контент, доступный через горизонтальную прокрутку или свайпинг, поскольку они не ожидают его там найти.
Исследования показывают, что даже сильные визуальные сигналы, такие как стрелки, часто остаются незамеченными.
Люди ожидают, что им придется скроллить по вертикали в поисках дополнительного контента, но горизонтальная прокрутка ни с чем подобным у них не ассоциируется: подобное действие противоречит ментальному шаблону восприятия веб-страницы.
Тепловая карта сеанса айтрекинга на Apple.com: пользователи не обращают внимания на стрелки прокрутки, а значит, не видят дополнительного контента
3. Даже очевидные сигналы для горизонтальной прокрутки имеют слабую информационную насыщенность.
Даже если люди замечают сигналы о горизонтальной прокрутке, они вряд ли рискнут загружать непредсказуемый контент. Содержимое, скрытое за границами полей горизонтального скроллинга, находится в заведомо невыгодном положении, потому что даже характерные визуальные знаки (стрелки) обладают слабой информационной насыщенностью: пользователь вряд ли может догадаться, что за информацию он получит, нажав на стрелку прокрутки или самоотверженно прокрутив скроллбар.
Еще выше риск разочарования для тех вариантов страницы, где вся она может «свайпиться» полностью, чтобы сделать новый контент доступным: посетитель, возможно, вытерпит длительную процедуру ожидания полной загрузки новый страницы, чтобы убедиться, что открывшийся его глазам контент абсолютно нерелевантен его интересам.
USAToday.com: пользователи не пользуются стрелками горизонтального скроллинга, потому что не знают, что откроется при нажатии
- Почему стереотипныe лендинги и сайты конвертируют лучше?
Советы по имплементации горизонтальной прокрутки или свайпинга на веб-страницу для ПК
Если вы подумываете об имплементации жеста «скольжения пальцем» или горизонтального скроллинга на страницу сайта, которая будут отображаться на мониторе настольного компьютера или ноутбука, то вот несколько полезных советов.
1. Не позволяйте «свайпить» первичную навигацию
Если вы не хотите совсем убрать горизонтальную прокрутку html, то, по крайней мере, не заставляйте посетителей непременно «свайпить» ваш контент: некоторые захотят, но многие — нет. Разрешите альтернативные способы навигации: позвольте пользователям перемещаться и с помощью меню. Меню сообщит, что есть на сайте и поможет найти необходимую информацию.
Посетители полагаются на первичную навигацию, чтобы углубиться в веб-ресурс или перемещаться по категориям. Без глобальной навигации им сложнее искать дополнительный контент.
Dennys.com: такой дизайн обеспечивает очевидную глобальную навигацию в дополнение к стрелкам для свайпинга контента. При тестировании обнаружилось, что пользователь никогда не использовал стрелки. Вместо этого он полагался исключительно на глобальную навигацию и смог выполнить все задачи успешно.
2. Не заставляйте пользователей гадать, сколько еще контента осталось
Используйте полосу прокрутки с индикацией или нумерацию страниц. Это всегда хорошо — показать посетителям, где именно они находятся на вашем ресурсе, чтобы они могли лучше ориентироваться. Скажите людям, сколько еще контента им предстоит освоить: осмысленное движение вперед всегда лучше слепого блуждания без цели.
Amazon.com: нумерация страниц наглядно показывает, сколько еще вариантов офферов осталось посмотреть
- Когнитивный диссонанс и интернет-маркетинг
3.
Создайте очевидные, всегда видимые сигналы для свайпинга
Вместо того, чтобы просто убрать горизонтальную полосу прокрутки, позвольте посетителям без лишних сложностей продвигаться через ваш контент с помощью кликов мыши или клавиш клавиатуры. Если стрелки прокрутки видны только при наведении на них курсора (как на примере ниже), многие просто не догадаются, что содержимого на ресурсе гораздо больше.
Netflix.com: в обычном состоянии нет визуальных подсказок, указывающих, что доступно больше контента (вверху). Стрелки для горизонтального скроллинга появляются только при наведении курсора мыши (внизу).
- Оптимизация юзабилити главной страницы интернет-магазина
Вывод
Горизонтальные прокрутка и свайпинг на мониторе десктопа относятся к совершенно другому типу пользовательского опыта, нежели при использовании их на сенсорных дисплеях планшетов и смартфонов. Перед нами наглядный пример того, почему маркетологи и веб-дизайнеры должны понимать, что люди используют мобильные телефоны, планшеты и настольные компьютеры по-разному, и почему выгодно оптимизировать дизайн ресурса под каждый вид устройств.
Не нужно нарушать устоявшиеся пользовательские паттерны восприятия только ради того, чтобы выделиться на фоне конкурентов по маркетинговой нише. Вместо этого лучше оценить, подходит ли горизонтальный скроллинг запросам и ожиданиям вашей целевой аудитории, улучшит ли ваше технологическое нововведение юзабилити ресурса — или, увы, наоборот.
Высоких вам конверсий!
По материалам nngroup.com, image source Jatin Shah
30-05-2014
Почему появляется горизонтальная прокрутка css html
Горизонтальная прокрутка CSS: определение и как убрать на всех разрешения
Главный недостаток горизонтального скролла — в веб-версиях сайтов он смотрится «не очень» , п лю с п ользователи компьютеров и ноутбуков неохотно им пользуются. Из-за этого вокруг горизонтального скролла царит облако негатива , и поисковые системы жестко определили свою позицию.
Другое дело, когда горизонтальный скролл применяется в мобильных версиях веб-ресурсов.
Копаясь в телефоне, удобно скроллить определенный контент «в сторону». Однак о г оризонтальный скролл оправдывается, когда реализован в отдельных блоках для удобства пользователя. Если, опять же , скроллится вся страница веб-сайта — это плохо.
Горизонтальный скролл CSS: особенности
В веб-версиях ресурса он не заметен. Если организовать горизонтальный скролл в веб-версии сайта, тогда нужно быть готовым к тому, что пользователи будут не замечать его или просто игнорировать. Поэтому, если он организован специально, не нужно размещать важную информацию таким образом.
Поисковые системы к горизонтальному скроллу относятся с презрением. Пользователям десктопных устройств не нравится скроллить «в сторону». Это не удобно. Поэтому поисковые системы пошли им навстречу и не рекомендуют использовать такой вид скролла на веб-ресурсе.
В мобильной версии веб-сайт а г оризонтальный скролл позволяет компактно размещать однообразную информацию в пределах определенного блока.
Например , товары одной категории в интернет-магазине. Допустим , у вас есть несколько важных категорий то ва ра, которые вы хотите разместить в начале страницы. В этом случае вы размещаете категории вертикально друг под дру гом , а товар в них размещаете так , чтобы он скроллился горизонтально.Горизонтальный скролл экономит много места на небольших экранах. При этом он не сильно нагружает страницу, если сравнивать с вариантом вертикального расположения всего контента.
Как убрать горизонтальный скролл с помощью CSS
Прежде чем убрать горизонтальную прокрутку возможностями CSS , давайте выясним , из-за чего она появляется. Рассматриваем тот случай, когда горизонтальный скролл появился «случайно», а не был сделан специально.
Горизонтальная прокрутка появляется в том случае, когда какой-то элемент «выходит» за область видимости контента страницы. У начинающих верстальщиков и веб-разработчиков это довольно частое явление. Чтобы избавит ь ся от горизонтальной прокрутки , нужно «выскочивший» элемент «загнать» в область видимости или удалить.
Если удалось «поправить» такой элемент, тогда хорошо. Если нет, потому что вы не можете его найти, тогда есть проверенное CSS-свойство «overflow».
Как убрать горизонтальный скролл в html, используя CSS-свойство «overflow»
overflow-х — свойство, отвечающее за горизонтальную прокрутку;
overflow-у — свойство, отвечающее за вертикальную прокрутку.
Заключение
Сегодня вы узнали, что такое горизонтальная прокрутка и как ее можно специально использовать. Если же она возникла случайно, тогда есть проверенный способ, как убрать горизонтальный скролл возможностями CSS — использовать свойство «overflow».
Горизонтальная прокрутка не рекомендована к использованию , о днак о в отдельных случая х б ез нее никак не обойтись. Поэтому , прежде чем ее создавать или удалять, нужно тщательно все обдумать.
Мы будем очень благодарны
если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.
На мобильных появляется горизонтальная прокрутка, как убрать?
VicTHOR, товарищ попросил ему сайт сделать, домен старый свой был, пока на нём тестим, потом перенесу ;))
- Вконтакте
seminyuri, потестил сайт(firefox, chrome) и с пк и с мобильного (chrome) никакаго скрола нет
как вариант можно задать всем элементам section
Как убрать горизонтальную прокрутку сайта
«…у меня проблема, если параметр padding: 20px; меняю хоть на 1 пиксель меньше 20ти то появляется горизонтальная прокрутка, что только не пробовал, кстати у вас она (прокрутка) тоже имеет место быть. Как избавится от этого?» Этот вопрос возник в одном из комментариев к статье о резиновой теме F2. В тот момент я не смог адекватно ответить и подсказать посетителю, как решить его проблему, потому как, у меня на мониторе горизонтальная прокрутка отсутствовала. Спустя некоторое время, работая с другой темой, я обратил внимание на появившуюся горизонтальную прокрутку в нижней части окна браузера.
Возвращать изменённые коды в таблице стилей в исходное состояние не стал, а дописал маленькую строчку, которая выглядит вот так:
overflow-x: auto;
Вставить её нужно в блок: body
font-family: Georgia, Arial, Helvetica, sans-serif;
margin: 0px; padding: 0px;
background-size: color: #102722;
Не забудьте обновить файл, а затем, обновить страницу сайта. Прокрутка должна исчезнуть. Но, если полоса прокрутки всё же отображается, проверьте, какой масштаб страницы у вас установлен, он может быть увеличен. Не обязательно менять масштаб, может вам удобнее читать страницу именно в таком масштабе. Нужно лишь вместо слова «auto» вписать слово «hidden«, т.е., запретить прокрутку полностью, вот так:
Теперь, горизонтальная прокрутка уже точно не будет отображаться.
Поделиться ссылкой:
Ещё из этой рубрики
Как скрыть логин админа из Html — кода
Содержание:1 Как узнать имя админа2 Поделиться ссылкой: Как узнать имя админа Здравствуйте друзья! В предыдущей статье мы вроде бы как, затруднили взлом сайта путём изменения имени/логина администратора.
Но.
Как сделать отступ в первой строке абзаца
Для придания тексту более удобной для чтения формы, применяют приём разделения длинного текста на абзацы, причём, в каждом абзаце первая строка имеет некоторый отступ слева. Чтобы добиться автоматического.
Как убрать кавычки из виджета «Рубрики» в шаблоне F2
Содержание:1 Спрятать или заменить символ Юникода Поделиться ссылкой: Спрятать или заменить символ Юникода В последнее время участились вопросы посетителей о том, как убрать “стрелочки” слева от ссылок.
Как создать градиенты в теме F2 без сервиса и без редакторов
Содержание:1 Как вставить линейный градиент в шапку блога2 Поделиться ссылкой: Как вставить линейный градиент в шапку блога Здравствуйте уважаемые друзья, подписчики и просто интересующиеся. В статье: “Дизайн сайдбаров в.
Как вставить картинку в шапку темы F2
Приветствую Вас, Друзья! Эта статья является продолжением предыдущего поста: Как сделать резиновую шапку для сайта.
Сейчас мы рассмотрим, как изменять шрифты и их размер в заголовке и подзаголовке, как.
9 комментариев
Чудны дела твои, господи! Михаил, вчера я точно туда и вставляла эту строку и ни-че-го! А сейчас, пока календарь дописываю, нате, вам, пожалуйста. Как хочешь, так и понимай. В любом случае-спасибо. Пусть мне это особо не мешало, но приятнее без этих хвостов.
У меня все, как всегда-не срабатывает. Пол сантиметра прокрутки как было, так и есть.
Оксана, а ссылка есть на сайт? Я хочу посмотреть.
О! Что-то мне этот комментарий не пришел. Ссылка есть, конечно. greens-avenue.ru Но я удалила эти записи, раз не сработало. Добавить назад?
Оксана, а у меня есть вход на Ваш сайт? Я уже не помню, делали мы на этот сайт вход.
На него крооме меня никто входа не имеет 🙂
Оксана, если хотите, добавьте меня в пользователи, придумайте мне временный пароль и имя, и присвойте мне временно роль Администратор.
Я зайду в админку и впишу код куда нужно. Потом переприсвоите роль на Подписчик или совсем удалите (по желанию). Имя и пароль пришлите мне по почте, чтобы в третьи руки не попало.
Полысеть можно, пока этого пользователя добавишь. То пароль не нравится, то имя надо не на русском. Отправила на почту которая у Вас в контактах указана.
Да, я когда первых десять посетителей добавлял в пользователи тоже чертыхался. Я обычно девчатам и ребятам пишу по почте свои имя и пароль через скайп или почту, а тут отослал по почте, а письмо не прошло. Пришлось по другому поступить. Но это опыт хороший, пригодится.
Все, что вам нужно знать о горизонтальной прокрутке
Горизонтальная прокрутка всегда считалась спорной техникой веб-дизайна, и долгое время с появлением таких устройств, как планшеты, смахивание позволило вернуться к горизонтальной прокрутке. Может быть, из-за свайпа пользователи привыкли к горизонтальной навигации?
Несколько лет назад пользователи неохотно перемещались по контенту.
Однако с тех пор пользователи изменились и стали более восприимчивы к идее прокрутки в обоих направлениях. Предпочтительнее прокручивать, щелкая несколько страниц или экранов. Прокрутка совершенно естественна и более эффективна. Мы наблюдаем увеличение количества дизайнов, использующих неразрывные списки, которые прокручиваются горизонтально для большего количества контента, особенно на мобильных устройствах, где горизонтальное пространство ограничено. С другой стороны, вертикальная прокрутка работает как основа практически каждого цифрового взаимодействия, с которым вы сталкиваетесь. .
Горизонтальная прокрутка: краткое определение
Горизонтальная прокрутка — это метод навигации по страницам, при котором пользователь прокручивает влево и вправо, чтобы открыть содержимое по бокам окна или контейнера. Горизонтальную прокрутку можно выполнить, щелкнув и перетащив горизонтальную полосу прокрутки, проведя пальцем вбок по трекпаду на рабочем столе или мыши с трекпадом, нажав клавиши со стрелками влево и вправо или проведя пальцем вбок по сенсорному экрану.
Когда использовать горизонтальную прокрутку?
1. Отображение нескольких изображений (например, для сайта фотографии или портфолио дизайнеров)
2. Отображение информации в большой визуальной области, которую нелегко увидеть с первого взгляда (например, карта)
3. Отображение отдельных разделов или слайды с информацией о приложениях
4. Отображение большого каталога продуктов или элементов, чтобы можно было легко показать различные категории продуктов
Передовой опыт
Не используйте горизонтальную прокрутку на полных веб-страницах
Горизонтальная прокрутка никогда не должна заменять вертикальную прокрутку на полной веб-странице. Нарушение этого соглашения оттолкнет большинство пользователей. Если вы хотите, чтобы различные разделы вашей главной страницы переходили по горизонтали, рассмотрите возможность запуска горизонтальной анимации с вертикальной прокруткой
Горизонтальные полосы прокрутки должны быть спроектированы как вертикальные полосы прокрутки
На рабочем столе горизонтальные полосы прокрутки должны быть доступны в своих контейнерах.
Горизонтальные полосы прокрутки должны выглядеть и функционировать так же, как их вертикальные аналоги, для единообразия дизайна. Избегайте пользовательских стилей полос прокрутки, так как они служат для помощи и не должны отвлекать фокус 9.0003
Есть несколько исключений для размещения видимых полос прокрутки. Если на обеих сторонах контейнера есть кнопки, которые позволяют пользователям прокручивать, пользователи могут нажимать на них вместо перетаскивания полосы прокрутки. Кроме того, не показывайте полосу прокрутки, если содержимое контейнера возвращается к началу в конце потока содержимого.
Должны быть предложены другие методы взаимодействия
Даже если для вашей страницы используется горизонтальная прокрутка, мы рекомендуем предоставить пользователям настольных компьютеров другой способ отображения скрытого содержимого. Такую же функцию может выполнять кнопка со стрелкой. У мобильных пользователей будет меньше проблем с перелистыванием в сторону, поэтому кнопки на мобильных сайтах не нужны.
Тем не менее, основная ориентация прокрутки должна оставаться вертикальной на устройствах с сенсорным экраном.
Параметр горизонтальной прокрутки должен быть визуально заметен
Не забудьте свести к минимуму вероятность того, что посетители пропустят ваш контент, сигнализируя о возможности горизонтальной прокрутки. В дополнение к индикаторам кнопок, таким как стрелки, вы можете настроить контейнеры прокрутки таким образом, чтобы горизонтальная полоса прокрутки появлялась при наведении курсора мыши. Или попробуйте отобразить кусочек скрытого содержимого в прокручиваемом контейнере.
Преимущества горизонтальной прокрутки
Итак, как вам поможет включение горизонтальной прокрутки на ваш сайт?
- Дизайн почти на 100 % согласован на всех устройствах.
- Он экономит много места на экране по вертикали, поскольку предназначен для размещения вторичной информации, которая не занимает область страницы.
- Позволяет пользователям просматривать параметры в категории, проводя пальцем в сторону или прокручивая вниз, чтобы увидеть разные категории.
Недостатки горизонтальной прокрутки
- Чтобы использовать горизонтальную прокрутку на настольных компьютерах, пользователям приходится полагаться на полосы прокрутки, а не на стрелки на ноутбуках или портативных устройствах. Это обременяет пользователя, требуя постоянного внимания и больших физических усилий для поддержания перетаскивания 9.0048
- Из-за подсознательной зависимости от вертикальной прокрутки пользователи могут игнорировать контент, доступный с помощью горизонтальной прокрутки, поскольку они не ожидают, что там появится контент
- скрыты, и они не имеют никакого контроля над
Заключение
В Интернете много споров об использовании двунаправленной прокрутки и ее влиянии на UX. Но это очень помогает в разделении контента и экономит много места по вертикали в приложении, если использовать его с умом. Если ваше приложение и веб-сайт борются с проблемами адаптивного дизайна, не стесняйтесь свяжитесь с нашими специалистами .
Подробнее о реализации длинной прокрутки читайте здесь .
Mobile Responsiveness — Горизонтальная прокрутка Устранение неполадок
Действия, которые могут вызвать нежелательную горизонтальную прокрутку на мобильных устройствах, и как избежать этой проблемы.
Иногда при настройке мобильного представления поста/страницы, созданной Thrive Architect, для определенных элементов может появиться горизонтальная полоса прокрутки .
В этой статье будут рассмотрены наиболее распространенные проблемы, которые могут привести к этому, а также способы их предотвращения.
Тем не менее, убедитесь, что перед тем, как начать, вы также просматриваете эти статьи, так как в них содержится более подробная информация об адаптации мобильных устройств:
Как использовать адаптивную настройку
Мобильные адаптивные шаблоны is Thrive Theme Builder
Почему моя страница выглядит не так, как в превью на моем мобильном устройстве?
Адаптивная опция в редакторе Thrive Theme Builder
Настройка элемента макета и положения
Дополнительные параметры макета и положения
Проблема № 1.
Слишком высокие значения полей с позиционированием или с размером ваших элементов.Например, элемент, для которого вы установили то, что кажется обычным полем слева, в режиме рабочего стола, может выглядеть совсем иначе в мобильном представлении.
Если вы покинете страницу в таком виде и зайдете на нее с мобильного устройства, элемент будет виден, но также появится горизонтальная полоса прокрутки :
Естественно, это происходит потому, что значение 400px слишком велико для «Планшет» и «Мобильный» просмотров.
Как решить проблему
Все, что вам нужно сделать, чтобы избежать этой ситуации, это убедиться, что для всех ваших элементов установлены правильные интервалы и поля .
Таким образом, даже если вашему элементу требуется поле в 400 пикселей слева, например, убедитесь, что вы переходите в представления «Планшет» и «Мобильный» и измените соответствующие поля , уменьшив их.
При изменении полей помните, что мы используем правило «Каскадирование», о котором вы можете узнать больше в конце этой статьи.
Проблема № 2 — Фиксированная или минимальная ширина установлена для элементов0079 фиксированная ширина/минимальная ширина
для элемента:В этом случае снова может появиться горизонтальная полоса прокрутки для элемента в представлениях «Планшет» или «Мобильный».
Как решить проблему
Решение здесь тоже состоит в том, чтобы убедиться, что даже если фиксированная/минимальная ширина необходима в представлении «Рабочий стол», вы можете изменить ее в двух других представлениях.
Итак, подводя итог, вот что вам нужно сделать, если вы хотите избавиться от горизонтальной прокрутки на мобильных устройствах:
| Выпуск №1 Мобильная горизонтальная прокрутка была вызвана слишком большим полем , слева или справа от элемента. Проверьте все элементы в представлении «Мобильный» и удалите все высокие поля слева или справа от элемента. |
Проблема №2 Мобильная горизонтальная прокрутка была вызвана установкой высокая фиксированная / минимальная ширина для элемента. Установить элементы на «auto» , или просто уменьшить ширину на мобильных устройствах. |
Проблема № 3. Добавление эффектов анимации и действия к элементам
В некоторых случаях добавление эффекта анимации к элементу Thrive Architect может привести к появлению горизонтальной полосы прокрутки, как показано здесь:
Как исправить выпуск
В этом случае вы можете попытаться выбрать элемент с примененной к нему анимацией или оболочку элемента. Перейдите в раздел «Макет и положение» → Дополнительно → Переполнение и установите значение «Переполнение» в hidden :
Если это не сработает, можно также попробовать обернуть элемент («Кнопка», для пример) внутри элемента «Поле содержимого» и установите значение «Переполнение» на скрытое для элемента «Поле содержимого»:
Если горизонтальная полоса прокрутки все еще сохраняется, вы можете добавить пользовательский код CSS на страницу (Настройки → Дополнительные настройки → Пользовательский CSS):
Вот код CSS:
html, body {overflow-x: hidden !important;width: 100vw !important;} Наше каскадное правило
При использовании Thrive Architect помните, что для трех различных представлений, которые вы можете редактировать («Рабочий стол» / «Планшет» / «Мобильный»), мы используем каскадное правило.
Это означает, что:
модификации, сделанные на Вид «Рабочий стол» повлияет как на вид «Планшет», так и на «Мобильный»;
изменения, внесенные в вид «Планшет» , повлияют только на вид «Мобильный»;
изменения, внесенные в «Мобильный» вид , не будут отражать на любом другом виде.
Таким образом вы можете убедиться, что нежелательная горизонтальная прокрутка не будет отображаться на вашем сайте.
Если вам нужна дополнительная информация о продуктах и функциях Thrive, обязательно ознакомьтесь со всей нашей базой знаний, которую можно найти здесь.
Надеюсь, эта статья была вам полезна. Если это так, не забудьте оставить улыбку ниже 😄
Как решить проблему горизонтальной прокрутки в Divi
В этом уроке я покажу вам, как решить и предотвратить проблему с эффектом горизонтальной прокрутки вашего контента в Диви.
Категории: Учебники
Решение проблемы взаимодействия с пользователем
Вы когда-нибудь замечали, что на вашем сайте появляются горизонтальные полосы прокрутки, особенно на мобильных устройствах? При прокрутке на телефоне экран двигается вперед-назад в стороны? Это не хорошо для пользовательского опыта! Из-за этой проблемы сайт может выглядеть очень непрофессионально, а также сбивать с толку.
Многие веб-сайты Divi имеют эту проблему, и она часто остается незамеченной.
Эта проблема очень распространена независимо от того, какую тему вы используете, так что это не вина Divi! Обычно это ошибка пользователя, хотя и не всегда. К счастью, есть несколько решений.
У меня уже есть решение для этого в нашем плагине Divi Responsive Helper. Одним щелчком мыши вы можете включить переключатель, который будет работать за вас. Но я решил показать вам также бесплатный учебник, поэтому сегодня я собираюсь показать вам, как решить и предотвратить проблему горизонтальной прокрутки на вашем веб-сайте Divi.
Присоединяйтесь к подписчикам на нашем канале YouTube и наслаждайтесь другими видеоуроками Divi!
Подписаться на YouTube
В чем проблема с горизонтальной прокруткой в Divi?
Проблема, о которой мы говорим, может проявляться по-разному.
Иногда пользователи видят горизонтальную полосу прокрутки внизу. Это добавляется браузером, потому что некоторый контент слишком широк для экрана. Другие не видят полосы прокрутки, но замечают, что при прокрутке сайт смещается в сторону. Это особенно распространено на мобильных устройствах при прокрутке пальцем, и вы можете перемещать содержимое влево и вправо на экране.
Эта проблема возникает из-за того, что что-то делает контейнер страницы больше, чем окно браузера. Обычно это вызвано тем, что элемент шире своего контейнера, поэтому он свисает с края страницы. Существует вероятность того, что содержимое вашего веб-сайта может быть обрезано или скрыто.
С какой бы проблемой вы ни столкнулись, ее просто не должно быть! Это не выглядит хорошо. Это может сбить пользователей с толку и сделать сайт неработающим и непрофессиональным.
Что вызывает проблему горизонтальной прокрутки в Divi?
Теперь, когда у вас есть описание проблемы, давайте рассмотрим некоторые возможные причины, почему это происходит.
К сожалению, это не всегда одна конкретная общая причина, а скорее несколько возможных сценариев, которые, как известно, вызывают это.
Распространенные причины
- Часто это вызвано полями, отступами и размерами, которые не были должным образом оптимизированы для размеров планшетов и телефонов. Из-за этих настроек элементы могут выходить за пределы области просмотра браузера.
- Еще одна вещь, которую нужно проверить, это выпадающие подменю меню. Иногда они могут быть за пределами экрана.
- Возможно, меню навигации слишком широкое для страницы.
- Я даже слышал, что логотип был слишком широким и для него не хватало места.
- В настройках размера в модуле, строке или разделе может быть проблема с шириной или минимальной шириной.
- Я читал о случаях, когда причиной этого была анимация из-за движения за пределы контейнера.
- Если вы добавляете расширенные пользовательские стили в Divi в целом. Иногда вы хотите добиться определенного эффекта, но упускаете из виду эту проблему.
Дайте мне знать, что я пропустил, и я обновлю список!
Решения проблемы с горизонтальной прокруткой в Divi
Найдите причину
Есть несколько быстрых решений, но было бы разумно хотя бы сначала попытаться определить причину проблемы. Ключевым здесь является то, что что-то вызывает проблему. Идеальным решением всегда будет найти элемент, код или настройку и устранить причину. Проще сказать, чем сделать!
Решения
Есть несколько решений, но все зависит от причины. Не зная причины, довольно сложно дать конкретное решение. Таким образом, следующие шаги заключаются в рассмотрении общих причин, а затем в принятии мер по ним.
Для начала просто загрузите приложение на свой телефон, а также на рабочий стол. Используйте адаптивные инструменты в своем браузере, чтобы проверить что-нибудь очевидное.
Когда вы находитесь внутри Visual Builder, меняйте адаптивные представления между рабочим столом, планшетом и телефоном.
Заметили что-нибудь странное? Если вы это сделаете, откройте некоторые разделы, строки и модули и проверьте настройки размеров, ширины, отступов и полей. Чтобы упростить задачу, вы можете воспользоваться фильтрами и выбрать Адаптивные стили/контент для просмотра только тех настроек, которые были изменены на планшете и телефоне. Вы также можете выбрать фильтрацию по измененным стилям в целом, так как проблема может быть не связана с настройками реагирования. решить эту проблему, открыв элемент и перейдя на вкладку «Дополнительно» к переключателю «Видимость» и установив для параметра «Горизонтальное переполнение» значение «Скрытый».
Альтернативой настройке Divi является добавление «overflow: hidden»; в главном элементе раздела, строки, столбца или модуля, который является виновником.
Решите это с помощью фрагмента CSS
Если описанные выше методы не помогли, вы всегда можете использовать CSS. Этот фрагмент нацелен на элемент body и устанавливает горизонтальное переполнение как скрытое, а положение как относительное.
Это должно работать в большинстве случаев. Я не могу гарантировать, что так будет каждый раз, но это лучший известный мне способ справиться с этим.
Если вы используете нашу бесплатную дочернюю тему Divi , поместите этот фрагмент в файл style.css . В противном случае поместите это в свой Divi> Параметры темы> Пользовательский CSS 9.0068 кодовый ящик. Если вам нужна помощь, ознакомьтесь с нашим полным руководством по Где добавить пользовательский код в Divi .
/*предотвратить горизонтальную прокрутку на мобильных устройствах*/
@media все и (максимальная ширина: 980 пикселей) {
HTML,
тело {
переполнение-x: скрыто;
}
тело {
должность: родственник
}
} Сделайте это с помощью настройки!
Сделайте жизнь проще и используйте вместо этого Divi Responsive Helper, первоклассный адаптивный инструментарий Divi с потрясающими функциями и настройками, который поможет вашему веб-сайту отлично выглядеть и работать на всех устройствах!
Чтобы устранить проблему с горизонтальной прокруткой в Divi с помощью нашего плагина, просто перейдите на панель инструментов WordPress в Divi> Параметры темы и щелкните вкладку Divi Responsive Helper.
