Как в Тильде сделать горизонтальную прокрутку / горизонтальный скролл?
Вы можете реализовать горизонтальный скролл при помощи пошаговой анимации в Нулевом блоке.
Похожие вопросы
- Можно ли давать отдельный доступ пользователям к проектам?
- Наблюдаются ли у вашего сервиса проблемы из-за блокировок Роскомнадзором?
- Как сделать бэкап проекта на Тильде?
- Выписался счёт для тарифа Бизнес на 15000 рублей без скидки. Почему?
- Где находится Ваш ЦОД?
Этот ответ был вам полезен?
Просмотры: 38392
Сообщить о нарушении прав
Если вы считаете, что пользователь Tilda Publishing нарушает ваши права, отправьте нам сообщение через форму
Как связаться с поддержкой
Для консультаций по функциям платформы используйте форму обратной связи в вашем личном кабинете или напишите на team@tilda.cc
Горизонтальный скролл со стрелками в zero block
Модификация добавляет горизонтальному скроллу управление при помощи стрелок. Еще элементы могут скроллиться с помощью прокрутки и удержания кнопкой мыши. Решение скрывает горизонтальный скроллбар. Демо решения.
Как сделать
- Создай отдельно zero block с элементами, которые нужно скроллить. В настройках поставь overflow: auto.
- Создай отдельно zero block со стрелками. Каждая стрелка — это шейп. Для шейпа со стрелкой налево укажи класс arrow-left, для шейпа со стрелкой направо укажи класс arrow-right. Инструкция по добавлению своего класса элементу.
- Укажи настройках ниже id блока с элементами, id блока со стрелками и величину сдвига при клике на стрелку.
- Скопируй сгенерированный код и вставь на свой сайт. Памятка по вставке кода.
.scrollbooster-viewport < cursor: -webkit-grab; cursor: grab; padding-bottom: 30px; margin-bottom: -30px; >.scrollbooster-viewport:active < cursor: -webkit-grabbing; cursor: grabbing; >.scrollbooster-content < position: absolute; width: 100%; height: 100%; >.arrow-left, .arrow-right Как сделать горизонтальный скролл в тильде
Супер простая фишка, позволяющая значительно улучшить мобильный UI, при этом не прибегая к сложным скриптам слайдеров и подключению отдельных библиотек. Да-да.
- Разместите элементы в ряд, чтобы они выходили за границы артборда / холста
- Дабы последний элемент при скролле не заканчивался прям на границе экрана, разместите после него невидимый шейп шириной 20-30px, дабы создать отступ.
- Добавьте код в T123 и замените #recХХХХХХХХХ на ID вашего Zero блока
- Если вы хотите отображать скроллбар (ползунок) — удалите втору строку в коде
- Enjoy =)
Как сделать горизонтальный скролл в тильде
— Permanent workplace
— All facilities access: printer, beverages, lockers, etc.
— Access from 10:00 till 23:00
— Conference room for 1 hour a day
— Permanent workplace
— All facilities access: printer, beverages, lockers, etc.
— Day-and-night access
— Conference room for 1 hour a day
— Invitations to all events
Теперь к нюансам
1. Часто используют Overflow Visible, с высотой контейнера 0
На примере ниже, я показал, как делается наложение элементов на стандартный блок
2. Если вы, будете использовать горизонтальный скролл, а выше блок у вас с заголовком, то лучше их разделить на разные блоки, чтобы заголовок оставался на своем месте, а не скроллился
3. Следите, что вы прячете. Если нет особой надобности, то лучше спрятанные элементы удалить вовсе
4. Если все таки, какие то элементы, вы скрываете таким способом, то чтобы они наверняка не попали на глаза посетителям, с большими экранами, рекомендую в настройках ставить Opacity (прозрачность) 0