Алёнка

Как сделать горизонтальную прокрутку на сайте

Как создать горизонтально прокручиваемые контейнеры

Контейнеры с горизонтальной прокруткой становятся все более популярными. Особенно среди мобильно оптимизированных сайтов, где они используются для уменьшения высоты веб-страниц.

После реализации нескольких таких элементов я захотел выяснить, как с помощью минимального объема кода создать горизонтальную прокрутку, которая корректно работает, на всех типах пользовательских устройств.
Сначала создадим контейнер и дочерние div внутри него, которые будут прокручиваться по горизонтали.

<div> <div><h3>Card</h3></div> <div><h3>Card</h3></div> <div><h3>Card</h3></div> <div><h3>Card</h3></div> <div><h3>Card</h3></div> <div><h3>Card</h3></div> <div><h3>Card</h3></div> <div><h3>Card</h3></div> <divclass="card"><h3>Card</h3></div> </div>

Существует два способа сделать эти div горизонтально прокручиваемыми.

Вот CSS, который нам нужен. Никаких префиксов и jQuery. Простое использование overflow и еще одного свойства.

.scrolling-wrapper-flexbox { display: flex; flex-wrap: nowrap; overflow-x: auto; .card { flex: 0 0 auto; } }

Для контейнера нужно отключить вертикальную прокрутку (overflow-y) и включить горизонтальную (overflow-x). Затем для каждой карточки установим display: inline-block, чтобы они отображались в строке.
Свойство CSS, с которым вы, вероятно, не встречались — это white-space: nowrap. Оно используется для управления тем, как текст переносится в контейнере. В данном случае мы хотим отключить перенос с помощью значения nowrap.
Четыре строки свойств CSS, и у нас есть горизонтально прокручиваемый контейнер.
Как насчет поддержки браузерами? Идеально. Если вы не заботитесь об Internet Explorer или Edge. В Microsoft говорят, что они включат поддержку этого свойства в будущую версию браузера Edge.

Flexbox также может выполнить эту работу.

.scrolling-wrapper-flexbox { display: flex; flex-wrap: nowrap; overflow-x: auto; .card { flex: 0 0 auto; } }

Мы используем flex-wrap для достижения того же эффекта, что и в предыдущем примере.
Поддержка браузерами решения на основе flexbox лучше. Оно работает в IE и Edge.

В iOS веб-страницы прокручиваются с импульсом ускорения. Если вы быстро протянете пальцем вверх или вниз, страница будет продолжать прокручиваться после того, как уберете палец. Если вы достигнете верхней или нижней части страницы, он а отскочит назад от конца контейнера, прежде чем встанет на место.
К счастью, эту проблему легко решить:

.scrolling-wrapper { -webkit-overflow-scrolling: touch; }

Теперь у нас есть прокрутка для горизонтального контейнера. Вот пример того, как это выглядит:

По умолчанию контейнер с прокручиваемым контентом будет иметь полосы прокрутки. Но что, если мы не хотим добавлять скроллинг? Такое решение легко реализовать. Хотя работает оно только в браузерах на WebKit.

.scrolling-wrapper { &::-webkit-scrollbar { display: none; } }

Контейнеры с горизонтальной прокруткой становится все более распространенными.Поэтому лучше сохранить эти примеры:они понадобятся вам в будущем. Также можно обернуть код в медиа-запрос и отобразить горизонтальную прокрутку только для определенных устройств. И никакой головной боли с jQuery!

Данная публикация представляет собой перевод статьи «How To Create Horizontal Scrolling Containers» , подготовленной дружной командой проекта Интернет-технологии.ру

Как создать меню с горизонтальной прокруткой

Узнайте, как создать горизонтальное прокручиваемое меню с помощью CSS.

Попробуйте сами »

Как создать меню с горизонтальной прокруткой

Шаг 1) Добавьте HTML:

Пример

Главная
Новости
Связаться
Примерно
...

Шаг 2) Добавьте CSS:

Уловка для прокрутки навигационной панели заключается в использовании overflow: auto и white-space: nowrap :

Пример

div.scrollmenu {
цвет фона: # 333;
перелив: авто;
белое пространство: nowrap;
}

div.scrollmenu a {
display: inline-block;
цвет: белый;
выравнивание текста: по центру;
отступ: 14 пикселей;
текстовое оформление: нет;
}

дел.scrollmenu a: hover {
background-color: # 777;
}

Попробуй сам "

Совет: Перейдите к нашему руководству CSS Navbar Tutorial, чтобы узнать больше о панелях навигации.

.

Создание горизонтальной прокрутки | Webflow Blog

Время от времени (и вдумчиво) нарушая ожидания пользователей, вы можете привлечь дополнительное внимание к определенным областям вашего сайта и создать восхитительно захватывающий опыт, немного необычный. Преднамеренная горизонтальная прокрутка секций предлагает мощный инструмент для использования с этой тактикой UX.

И поскольку многие из вас спрашивали, как мы создали раздел с горизонтальной прокруткой на странице объявлений Interactions 2.0, мы подумали, что покажем вам, как это сделать самостоятельно.

Прежде чем мы углубимся, ознакомьтесь с демонстрацией горизонтальной прокрутки. Или клонируйте сайт, чтобы копаться и перепроектировать!

Шаг 1. Добавьте и задайте стиль для div-оболочки

Чтобы обеспечить максимальную отдачу в нашем разделе с горизонтальной прокруткой, мы разместили его в середине нашей демонстрационной страницы. Если вы продолжаете следовать указаниям, обязательно сделайте это.

Для начала добавьте на холст блок div и присвойте ему класс «Галерея.”Затем добавьте следующие стили:

Верхнее поле: 50 пикселей (верхнее и нижнее)
Ширина: 100%

Высота: 4000px
Позиция: относительная

Чтобы создать градиентный фон для раздела, добавьте в раздел «Фон» следующее:

Тип: линейный
Угол: 45 °
Цветной стоп 1: # 662d8c
Цветной стоп 2: # ed1e79

Затем добавьте еще один div в только что созданный div «Галерея» и назовите его «Дорожка прокрутки галереи».”

Установите положение абсолютное, полное. Измените Z-индекс на 1.

Добавьте еще один div в div «Gallery Scroll Track» и присвойте ему класс «Gallery Container» со следующими настройками:

Ширина: 100%
Высота: 100vh
Перелив: скрытый
Позиция: Относительная, верхняя, 0px

Добавьте в раздел «Дорожка прокрутки галереи» еще один блок под названием «Дорожка галереи» и добавьте следующие настройки:

Настройки дисплея: Flex
Макет Flex: по горизонтали, по левому краю, по центру
Ширина: 300vw
Высота: 100%
Позиция: относительная

Шаг 2: Добавьте свой контент

Теперь ваша панель навигатора должна выглядеть примерно так:

На следующих этапах мы добавим наши изображения в div «Gallery Track».Я решил добавить их через div с фоновыми изображениями, чтобы упростить задачу, но вы можете отображать все, от фотографий членов команды до цитат клиентов, и даже загружать свой контент из CMS.

Итак, добавьте div в «Дорожку галереи» и присвойте ему класс «Изображение галереи» со следующими настройками:

Гибкий элемент: развернуть
Поле: 20 пикселей (все стороны)
Высота: 70vh
Радиус границы: 5px

Чтобы изображения выделялись, вы также можете добавить тень со следующими настройками:

Цвет: rgba (0, 0, 0, 0.25)
Угол: 135 °
Расстояние: 1px
Размытие: 19px
Размер: 0px

Теперь у вас есть блок div, занимающий всю ширину контейнера галереи, но без фонового изображения. Поскольку я не создаю это с помощью динамического контента, извлекаемого из CMS, я добавлю дополнительный комбинированный класс в каждый блок div «Изображение галереи», чтобы я мог добавить уникальное фоновое изображение для каждого элемента.

Выберите div «Галерея изображений», добавьте комбо-класс «1», затем прокрутите вниз до раздела «Фон» и добавьте фоновое изображение.

Используйте следующие настройки:

Размер: Крышка
Позиция: Центр
Плитка: Нет

Затем добавьте свое изображение.

Теперь мы собираемся продублировать этот div «Изображение галереи», щелкнув его правой кнопкой мыши и дублируя его столько раз, сколько вам нужно.

Очевидно, у нас небольшая проблема: все изображения одинаковые! Поскольку мы добавляем изображения через CSS, каждый элемент с комбинированным классом Gallery Image 1 будет иметь одинаковое фоновое изображение.

Чтобы исправить это, откройте панель «Навигатор», выберите div «Изображение галереи» и продублируйте класс 1. Затем измените имя на 2, замените фоновое изображение и затем повторите этот процесс для каждого комбинированного класса.

Шаг 3. Добавьте взаимодействия

Хорошо, теперь, когда у вас есть отдельный комбинированный класс для каждого изображения, вернитесь на панель Navigator и выберите div «Gallery Scroll Track.”

Теперь откройте панель «Взаимодействие», щелкните значок «Плюс» в правом верхнем углу. В раскрывающемся меню выберите «При прокрутке в просмотре».

Затем измените «Сглаживание» на «60%», затем щелкните значок «Плюс».

Назовите взаимодействие «Триггер прокрутки галереи».

Щелкните значок «Плюс» рядом с маркером «0%». В раскрывающемся меню выберите преобразование «Переместить».

Выделив первое взаимодействие на 0%, измените положение «X» на «0vw».

Затем выделите взаимодействие на уровне 100%, измените «ключевой кадр» на «80%» и установите «X» на «-200vw».

Шаг 4: Последний шаг!

Это последний и очень важный шаг. Щелкните значок «Страницы» на левой панели.

Наведите указатель мыши на значок «Домой».Рядом с ним появится значок «Редактировать сведения о странице» - щелкните его. Откроется новая панель. Прокрутите вниз до раздела «Пользовательский код» и вставьте приведенный ниже фрагмент кода в поле ввода «Внутри тега ».

<стиль>

. Галерея-контейнер {

позиция: -webkit-sticky! Important;

позиция: липко! Важно;

}