🪐 Горизонтальный скролл с помощью Автолейаутов

Зачастую есть необходимость сверстать зеро-блок на мобильных разрешениях с горизонтальным скроллом. Раньше мы обычно создавали для подвижной части зеро отдельный блок и включали у него в настройках Overflow: Auto, и весь блок мог свайпаться на телефонах.

С помощью Автолейаутов можно сделать то же самое, но чтобы внутри одного блока находилась и подвижная и статичная части дизайна. Для этого следуйте простым шагам: (работает на grid и window верстке)

⭐️ Объедините подвижную часть в Автолейаут-группу (сокр. АЛ). Внутри могут быть обычные элементы или группы-объекты, не обязательно все делать на АЛ.

⭐️ Начиная с определенного брейкпоинта, где нужен горизонтальный скролл, настройте АЛ следующим образом: (показано на скриншоте)

💛 координата Х = 0 (чтобы объекты скроллились в самый край левой стороны без отступа)
🩷 ширина АЛ для грида: вся ширина блока в рх, Fixed; для виндоу: Fill
💜 паддинги слева-справа = ваши боковые отступы по сетке (крайний слева элемент будет начинаться с него, а крайний справа после скролла остановится на этом расстоянии)
💛 паддинг снизу = 20-30рх для того, чтобы скроллбар не наезжал на объекты
🩷 OVERFLOW: разделяем на X и Y, у Х ставим Scroll, у Y само поставится Auto

✨ Готово! Далее на других брейкпоинтах поправьте только ширину АЛ-группы и внутренних элементов.

💭 По всем вопросам можете писать в комментарии к посту 💕

#тильда #верстка