Как в Тильде сделать горизонтальную прокрутку / горизонтальный скролл?
Вы можете реализовать горизонтальный скролл при помощи пошаговой анимации в Нулевом блоке.
Похожие вопросы
- Можно ли давать отдельный доступ пользователям к проектам?
- Наблюдаются ли у вашего сервиса проблемы из-за блокировок Роскомнадзором?
- Как сделать бэкап проекта на Тильде?
- Выписался счёт для тарифа Бизнес на 15000 рублей без скидки. Почему?
- Где находится Ваш ЦОД?
Этот ответ был вам полезен?
Просмотры: 33403
Сообщить о нарушении прав
Если вы считаете, что пользователь Tilda Publishing нарушает ваши права, отправьте нам сообщение через форму
Как связаться с поддержкой
Для консультаций по функциям платформы используйте форму обратной связи в вашем личном кабинете или напишите на team@tilda.cc
Только горизонтальная прокрутка div
Всем привет! Подскажите как сделать только горизонтальную прокрутку? Я делаю:
При этом внутренние секции добавляются динамически, но скролл происходит только вертикально после заполнения внешнего блока по горизонтали. А мне надо, чтобы внутренние секции располагались по горизонтали, и скроллинг внешнего блока происходил только по горизонтали.
Отслеживать
8,677 18 18 золотых знаков 74 74 серебряных знака 181 181 бронзовый знак
задан 12 янв 2012 в 3:08
Ёхарный Бабай Ёхарный Бабай
3,403 4 4 золотых знака 34 34 серебряных знака 50 50 бронзовых знаков
Возможно, ширина внешнего блока жестко задана и добавляемые блоки сползают вниз, следовательно, появляется вертикальный скролл.
Как создать горизонтально прокручиваемые контейнеры
Контейнеры с горизонтальной прокруткой становятся все более популярными. Особенно среди мобильно оптимизированных сайтов, где они используются для уменьшения высоты веб-страниц.
После реализации нескольких таких элементов я захотел выяснить, как с помощью минимального объема кода создать горизонтальную прокрутку, которая корректно работает, на всех типах пользовательских устройств.
Сначала создадим контейнер и дочерние div внутри него, которые будут прокручиваться по горизонтали.
Обновлено: 2023-06-09 20:49:25 Вадим Дворников автор материала
Card
Card
Card
Card
Card
Card
Card
Card
Card
Существует два способа сделать эти div горизонтально прокручиваемыми.
Метод пустого пространства
Вот CSS, который нам нужен. Никаких префиксов и jQuery. Простое использование overflow и еще одного свойства.
.scrolling-wrapper < overflow-x: scroll; overflow-y: hidden; white-space: nowrap; .card < display: inline-block; >>
Для контейнера нужно отключить вертикальную прокрутку ( overflow-y ) и включить горизонтальную ( overflow-x ). Затем для каждой карточки установим display : inline-block , чтобы они отображались в строке.
Свойство CSS, с которым вы, вероятно, не встречались — это white-space : nowrap . Оно используется для управления тем, как текст переносится в контейнере. В данном случае мы хотим отключить перенос с помощью значения nowrap .
Четыре строки свойств CSS, и у нас есть горизонтально прокручиваемый контейнер.
Как насчет поддержки браузерами? Идеально. Если вы не заботитесь об Internet Explorer или Edge. В Microsoft говорят, что они включат поддержку этого свойства в будущую версию браузера Edge.
Метод Flexbox
Flexbox также может выполнить эту работу.
.scrolling-wrapper-flexbox < display: flex; flex-wrap: nowrap; overflow-x: auto; .card < flex: 0 0 auto; >>
Мы используем flex-wrap для достижения того же эффекта, что и в предыдущем примере.
Поддержка браузерами решения на основе flexbox лучше. Оно работает в IE и Edge.
Overflow прокрутка
В iOS веб-страницы прокручиваются с импульсом ускорения. Если вы быстро протянете пальцем вверх или вниз, страница будет продолжать прокручиваться после того, как уберете палец. Если вы достигнете верхней или нижней части страницы, он а отскочит назад от конца контейнера, прежде чем встанет на место.
К счастью, эту проблему легко решить:
.scrolling-wrapper
Теперь у нас есть прокрутка для горизонтального контейнера. Вот пример того, как это выглядит:
Полосы прокрутки
По умолчанию контейнер с прокручиваемым контентом будет иметь полосы прокрутки. Но что, если мы не хотим добавлять скроллинг? Такое решение легко реализовать. Хотя работает оно только в браузерах на WebKit.
.scrolling-wrapper < &::-webkit-scrollbar < display: none; >>
Заключение
Контейнеры с горизонтальной прокруткой становится все более распространенными.Поэтому лучше сохранить эти примеры:они понадобятся вам в будущем. Также можно обернуть код в медиа-запрос и отобразить горизонтальную прокрутку только для определенных устройств. И никакой головной боли с jQuery!
overflow-x
Свойство overflow-x управляет отображением содержания блочного элемента по горизонтали, если контент целиком не помещается и выходит за область справа или слева от блока.
Синтаксис
overflow-x: auto | hidden | scroll | visible
Значения
visible Отображается все содержание элемента, даже за пределами установленной ширины. hidden Отображается только область внутри элемента, остальное будет скрыто. scroll Всегда добавляется горизонтальная полоса прокрутки. auto В зависимости от браузера, в основном, горизонтальная полоса прокрутки добавляется только при необходимости.
HTML5 CSS 2.1 CSS3 IE Cr Op Sa Fx
overflow-x Duis te feugifacilisi
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства overflow-x
Объектная модель
[window.]document.getElementById(» elementID «).style.overflowX