Горизонтальный скролл на мобильном сайте
Горизонтальный скролл на мобильном сайте — один из самых популярных и одновременно самых ломаных элементов интерфейса. Большинство разработчиков его делает неправильно: забывают про свайп-бэк в iOS, не считаются с шириной экрана на старых мобильных устройствах, не проверяют разрешение ниже 330 пикселей. На новом iPhone все красиво. На пятилетнем телефоне — каша. Горизонтальный скролл требует правильного HTML и CSS, тестирования на разных версиях браузеров, и часто целый день отладки. Эта статья разбирает правильно: как реально сделать такой скролл, чтобы работало везде, какие типичные ошибки допускают разработчики, и главное — надо ли вообще использовать горизонтальный скролл на мобильной версии сайта или хватит вертикального.
Основные проблемы горизонтального скролла на мобильных устройствах
Сделать горизонтальный скролл на мобильных устройствах звучит просто. На практике это одна из самых ломаных задач в верстке сайта. Главная проблема: жест swipe-back в iOS. Когда пользователь свайпит слева направо с края экрана на iPhone, браузер интерпретирует это как "вернуться на предыдущую страницу". Если на сайте есть горизонтальный скролл карточек, юзер запускает свайп-бэк случайно. Результат: потеря примерно 30% мобильных пользователей, которые уходят со страницы ненароком.
Вторая проблема — разные версии браузеров на Android. Chrome, Firefox, Samsung Internet поддерживают горизонтальный скролл по-своему разному. На Android полоса прокрутки может быть видна или скрыта, скролл может лагировать на старых устройствах. На iOS и Android элементы блока ведут себя непредсказуемо при overflow-x: auto. Это не просто CSS свойство, а целый класс совместимости, требующий JavaScript кода для надежной работы.
Третий враг: разрешение экрана та мобильном. На iPhone 15 (430 пиксель) горизонтальная карусель из четырех карточек выглядит отлично. На iPhone SE (375 пиксель) те же элементы перекрывают друг друга, становятся нечитаемы. Мобильных устройств на рынке сотни разных: от старых с 320 пиксель до современных с 480+. Каждый требует отдельного тестирования.
Полоса прокрутки создает четвертый слой проблем. На iOS она скрывается автоматически, на Android остается видна. На мобильных устройствах её размер больше, чем на десктопе. Высоту блока контента нужно выбрать правильно: слишком большой займет полэкрана, слишком маленький неудобен для свайпа пальцем. Это требует калибровки под каждый диапазон разрешения экрана.
Элементы горизонтального скролла должны масштабироваться гладко. Большинство разработчиков забывают про эту деталь и верстают под свой собственный iPhone. Скролл работает там идеально. На других мобильных устройствах он ломается. Вот почему горизонтальный скролл остается одной из самых ненадежных частей любого сайта.
Кейсы, где горизонтальный скролл действительно работает
Несмотря на все проблемы, есть места, где горизонтальный скролл имеет смысл и улучшает юзабилити.
Галереи изображений. Airbnb показывает фото жилья горизонтальным скроллом. Пользователь быстро просматривает все варианты, и интерфейс ощущается плавным. Pinterest полностью основана на горизонтальных каруселях контента — это работает, потому что они потратили месяцы на адаптацию сайта под разные версии браузеров и мобильных устройств.
Карусели товаров в e-commerce. ASOS использует горизонтальный скролл карточек для похожих товаров. Элементы блока подвижны, реагируют на свайп — это увеличивает клики на альтернативные варианты. Примеры успеха есть у других интернет-магазинов, когда горизонтальный скролл карточек правильно реализован.
Но важное уточнение: успешные компании не просто включили overflow-x: auto и забыли про проблему. Они написали собственные решения для конфликта со свайп-бэком, добавили поддержку старых версий браузеров на мобильных устройствах, тестировали на десятках реальных телефонов с разными разрешениями, калибровали настройки полосы прокрутки. Это не один день работы.
Когда использовать горизонтальный скролл: только если это критично для опыта пользователя и ты готов потратить ресурсы на то, чтобы сделать его правильно. Галереи — да. Карусели товаров — да. Просто красивый дизайн — нет. Спросите себя: это действительно нужно юзерам, или это просто выглядит красиво в макете?
UX между эстетикой дизайна и реальностью
Много дизайнеров рисуют макеты с красивыми горизонтальными каруселями. На картинке это выглядит современно и интерактивно. Потом разработчик начинает верстку сайта и сталкивается с реальностью: нужно поддержать старые версии браузеров, нужно учесть разные разрешения экрана, нужно преодолеть конфликты с нативными жестами.
Горизонтальный скролл, который красиво выглядит на iPhone 15, может стать кошмаром на iPhone SE или бюджетном Android. Элементы блока могут быть неправильно размером, полоса прокрутки может быть в неправильном месте, текст может быть нечитаемым. Когда вы тестируете только на одном девайсе, этого не видно. Когда юзеры начинают открывать ваш сайт на разных мобильных устройствах, проблемы становятся очевидны.
iOS и Android: разные подходы на разных версиях
Совместимость между iOS и Android — это не одна проблема, а целый класс. На iPhone XR (414 пиксель) горизонтальный скролл работает не так, как на iPhone SE (375 пиксель). Разница в 40 пиксель кажется мелочью, но в расчете ширины карточек это может сломать весь макет.
Android еще более разнологичен. Устройства варьируются от 320 пиксель до 480+ пиксель. На одном разрешении экрана горизонтальный скролл показывает 3 карточки, на другом — 5. Каждый блок контента требует отдельной адаптации.
Полоса прокрутки на разных версиях браузеров ведет себя по-разному. На мобильных устройствах её видимость, размер, цвет — все влияет на чистоту интерфейса. Если вы установить overflow-x: auto и забыли про остальное, полоса будет то видна, то скрыта, в зависимости от браузера.
Адаптация сайта требует точной работы с media queries. Не просто "мобильный" и "десктопный" — а калибровка под каждый конкретный диапазон ширины. Размер шрифта в карточках, высоту блока с изображениями, отступы между элементами — все масштабируется. Это требует времени и внимания к деталям.
Вот почему большинство разработчиков делают горизонтальный скролл неправильно. Это требует глубокого понимания того, как браузеры разных версий обрабатывают overflow, как жесты на мобильных устройствах взаимодействуют с элементами интерфейса, и как масштабировать макет под сотни вариантов разных мобильных устройств и разрешений. Прямой горизонтальный скролл — это неделя минимум правильной разработки, если вы хотите, чтобы он работал везде.