Как убрать горизонтальный скролл на мобильной версии сайта?
Рассказываем, как избавиться от ненужного горизонтального скролла на мобильной версии сайта.
Пример: Вы делайте верстку для десктопа и мобильную адаптацию, публикуете сайт — а на мобильных устройствах появляется прокрутка внизу экрана. Вы можете свайпать влево, и часть контента уезжает с экрана. Так быть не должно.
Смотрите видео:
https://vk.com/video-219751701_456239220
Почему возникает горизонтальный скролл?
Чаще всего у новичков возникают ошибки при верстке сайта на брейкпоинте для мобильного телефона в портретном режиме. Он имеет ширину от 497 до 320 пикселей.
Основная причина проблемы — ширина элемента задана фиксировано и она больше рабочей области экрана смартфона. Например, если вы задали элементу ширину в 500 пикселей на десктопной версии, то он будет выходить за пределы экрана на смартфоне.
Часто фиксированную ширину задают большим элементам — секциям, контейнерам, изображениям. Так делать не стоит.
Как найти проблемный элемент
Если вы задали фиксированную ширину какому-либо элементу, то нужно найти этот элемент и исправить ошибку.
Не всегда получается это сделать быстро. Поможет специальная функция Taptop:
- Нажмите комбинацию клавиш Shift + O
- На странице отобразятся контурные линии всех блоков
- Элементы, выходящие за пределы экрана, будут подсвечены красным цветом
Решение 1: Убрать фиксированную ширину
Найдя проблем элемент, уберите у него фиксированную ширину — тогда горизонтальный скролл пропадет.
Чтобы задать ширину для больших блоков, лучше использовать максимальную ширину (Max width).
Тогда элемент будет автоматически подстраиваться под изменение ширины экрана, при этом не превышая заданную величину.
Решение 2: Скрыть переполнения для анимированных элементов
Горизонтальный скролл также может появляться при анимации объектов, которые выезжают из-за пределов экрана. Например, начальная координата объекта по оси Х имеет значение –200 пикселей.
В этом случае можно воспользоваться настройкой переполнения родительского блока.
- Выберите родительский блок (секцию), в котором находится анимированный элемент.
- Найдите настройку Переполнение (Overflow) и установите значение Скрыть (Hidden).
Настройка означает, что объекты, выходящие за пределы блока, не будут показываться на странице. Поэтому и скролла не будет.
Резюме
Чтобы избежать горизонтального скролла:
- Не ставьте большим элементам фиксированную ширину.
- Используйте параметр максимальной ширины вместо фиксированной.
- Для анимируемых элементов, выходящих за пределы экрана, настраивайте скрытие переполнения у родительского блока.
Для поиска элементов, выходящих за пределы экрана, — включите контуры всех элементов на странице → Shift + O.