Как сделать горизонтальный скролл
Как создать горизонтально прокручиваемые контейнеры
Контейнеры с горизонтальной прокруткой становятся все более популярными. Особенно среди мобильно оптимизированных сайтов, где они используются для уменьшения высоты веб-страниц.
После реализации нескольких таких элементов я захотел выяснить, как с помощью минимального объема кода создать горизонтальную прокрутку, которая корректно работает, на всех типах пользовательских устройств.
Сначала создадим контейнер и дочерние div внутри него, которые будут прокручиваться по горизонтали.
Существует два способа сделать эти div горизонтально прокручиваемыми.
Метод пустого пространства
Вот CSS, который нам нужен. Никаких префиксов и jQuery. Простое использование overflow и еще одного свойства.
Метод Flexbox
Flexbox также может выполнить эту работу.
Мы используем flex-wrap для достижения того же эффекта, что и в предыдущем примере.
Поддержка браузерами решения на основе flexbox лучше. Оно работает в IE и Edge.
Overflow прокрутка
В iOS веб-страницы прокручиваются с импульсом ускорения. Если вы быстро протянете пальцем вверх или вниз, страница будет продолжать прокручиваться после того, как уберете палец. Если вы достигнете верхней или нижней части страницы, он а отскочит назад от конца контейнера, прежде чем встанет на место.
К счастью, эту проблему легко решить:
Теперь у нас есть прокрутка для горизонтального контейнера. Вот пример того, как это выглядит:
Полосы прокрутки
По умолчанию контейнер с прокручиваемым контентом будет иметь полосы прокрутки. Но что, если мы не хотим добавлять скроллинг? Такое решение легко реализовать. Хотя работает оно только в браузерах на WebKit.
Заключение
Контейнеры с горизонтальной прокруткой становится все более распространенными.Поэтому лучше сохранить эти примеры:они понадобятся вам в будущем. Также можно обернуть код в медиа-запрос и отобразить горизонтальную прокрутку только для определенных устройств. И никакой головной боли с jQuery!
Дайте знать, что вы думаете по данной теме материала в комментариях. Мы крайне благодарны вам за ваши комментарии, отклики, дизлайки, подписки, лайки!
Пожалуйста, оставьте свои мнения по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, дизлайки, лайки, отклики, подписки!
Практическое руководство: реализуем горизонтальную прокрутку секции на Flexbox
В этой статье мы рассмотрим решение повседневной задачи: как создать горизонтально прокручиваемую секцию сайта? Если вкратце, ответ — Flexbox.
Давайте разберёмся с этим более детально.
Каркас
Взгляните на эту разметку. Это простой блок section с несколькими вложенными div :
Стили
Плохой дизайн никто не любит, поэтому давайте сделаем страничку более опрятной:
Для наглядности применим стили к этому элементу :
Поместим все блоки card—content в секцию card и снова займёмся стилями. Сперва сделаем card flex-контейнером:
Как вы могли заметить, прокручивается вся страница. Так происходит, потому что в секцию card помещаются не все элементы.
И теперь прокручивается только секция: 
Прячем полосу прокрутки
Красоты ради можно спрятать полосу прокрутки. Для webkit-браузеров (Chrome и Safari) есть очень простой способ:
Согласитесь, так страничка выглядит лучше. 
Способы применения
В качестве примера мы использовали пустые блоки, но применить этот приём можно во многих приложениях. Вот пара примеров:
Горизонтальная прокрутка на чистом CSS
Дата публикации: 2016-12-15
От автора: статья нашего гостя, Питера Бизменса. Питер – front-end разработчик на сайте Audience, где он любит писать стили на SCSS. Сегодня он нам покажет то, что я называю честным CSS трюком. Весь веб имеет вертикальное строение. Вы читаете сайт, как обычную книгу: слева направо, сверху вниз. Но иногда хочется уйти от вертикальности и сделать что-то сумасшедшее: сделать горизонтальный список. Или еще безумнее, горизонтальный сайт!
Было бы неплохо, если бы мы могли делать вот так:
К сожалению, такого не будет. Такого даже в планах нет в CSS.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Это очень плохо, потому что в компании, в которой я работаю, это бы очень пригодилось. Мы делаем очень много презентаций, а презентация – это довольно горизонтальная штука. Обычно соотношение сторон у слайдов составляет 4:3 или 16:9. Из-за этого у нас возникает постоянная проблема с горизонтальными слайдами и вертикальными веб-технологиями. Под «мы» я имею в виду себя. Но что я люблю, так это трудности.
Другой вариант использования
Мне в голову пришел конкретный способ применения. Идея в том, что покупателям было бы удобно просматривать все товары на одном слайде. Естественно, каталог товаров не уместился бы в одном виде. Поэтому мы решили разбить каталог на три категории, каждая с горизонтальной прокруткой. Таким образом, три самых популярных товара видны в каждой категории, а к менее важным товарам открыт легкий доступ.
Способ без JavaScript
Все мы знаем, что на JS существует масса способ сделать горизонтальную прокрутку. Некоторые примеры есть на CSS-Tricks. Мне стало интересно, можно ли воплотить эту идею на чистом CSS. Решение оказалось очень простым:
создаем контейнер с элементами;
поворачиваем контейнер на 90 градусов против часовой стрелки, чтобы нижняя грань оказалась справа;
поворачиваем элементы внутри контейнера обратно на свое место.
Шаг 1) создаем контейнер
Создайте блок div с множеством дочерних элементов.
В нашем примере прокручиваемый контейнер будет 300px шириной, в нем будет 8 элементов 100х100px. Размеры произвольные, можно задать любые.
Высота контейнера станет шириной и наоборот. Ниже «ширина» контейнера будет составлять 300px:
И дочерние элементы:
Шаг 2) поворачиваем контейнер
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Только есть одна маленькая проблема: дочерние элементы повернулись вместе с контейнером.
Шаг 3) возвращаем дочерние элементы обратно на свое место
Так как же вернуть элементы на свое место? Поверните его обратно при помощи CSS свойства transform.
Шаг 4) фиксированное позиционирование
Смотрится все неплохо, но есть пара проблем.
Мы повернули контейнер, а в качестве якоря задали правый верхний угол, из-за этого левая сторона сместилась на ширину контейнера. Если вам сложно представить, просто приложите палец к правому верхнему углу страницы и поверните ее. Выход: нужно повернуть ее обратно с помощью свойства translate.
Уже лучше. Но первого элемента все еще не видно, так как та же проблема наблюдается и с дочерними элементами. Это можно поправить, задав первому дочернему элементу верхний margin со значением его ширины или трансформировав все элементы, как контейнер. Самый простой способ, который я нашел, это добавить верхний padding к контейнеру, равный ширине дочерних элементов, тем самым создав буферную зону для элементов.
Еще одно демо с прямоугольными дочерними элементами:
Совместимость
Я проверил совместимость на доступных мне устройствах.
Десктоп
Так как стилизация скроллбаров пока что работает только в Webkit/Blink браузерах, в Firefox и IE показывается обычный серый скроллбар. Это можно поправить с помощью JS и прятать их вообще, но это тема для другого урока.
Прокрутка с помощью колеса мыши отлично работает на десктопе. Но у моего ноутбука свое мнение на этот счет. На устройствах с тач скринами и тач падами демо ведет себя так, будто div вообще не поворачивали.
Мобильные устройства
Я был приятно удивлен, когда узнал, что Android понимает, что контейнер был повернут, и позволяет вам скролить с помощью свайпов вправо и влево.
С iOS же наоборот, все не так гладко. Браузер ведет себя так, будто контейнер не поворачивали вовсе. Поэтому для прокрутки нужно использовать свайпы вверх и вниз, что довольно странно. Overflow: hidden не решает проблему.
Заключение
По данным сайта Can I Use трансформации в CSS сейчас поддерживаются у 93%+ пользователей (на момент написания статьи, ноябрь 2016). Тут проблемы возникнуть не должно.
Хотя лучше не используйте этот метод в продуктиве. Я протестировал его на некоторых устройствах, но далеко не на всех и не так тщательно.
Самая большая проблема – сенсорные инпуты, в которых для перехода налево и направо нужно делать свайпы вверх и вниз. В качестве решения можно было бы прописать сообщение на сайте с объяснением, но тогда вам придется положиться на то, что пользователи прочитают его. И даже тогда это будет противоречить здравому смыслу. Другой способ решения – захватывать сенсорные инпуты с помощью JS на устройствах, но тогда лучше вообще все писать на JS и полностью отказаться от нашего CSS хака.
Автор: Pieter Biesemans
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Горизонтальный скролл. Когда и где использовать
Эта статья входит в цикл моих статей “Шкатулка с секретами”, в ней я делась своими знаниями о работе и особенностях применения различных компонентов. Сегодня я хочу поговорить о таком популярном, но в тоже время спорном приёме, как горизонтальный скролл.
На сайтах с большим количеством информации дизайнеры охотно прибегают к использованию горизонтального скролла, чтобы сократить высоту страниц и контролировать объем получаемой пользователем информации.
К сожалению, данное решение часто работает не так хорошо, как хотелось бы. Основная причина заключается в том, что в веб версии пользователи до сих пор крайне неохотно работают с горизонтальным скроллом. Это решение чаще других других вызывает сильные негативные эмоции. При этом в мобильной и планшетной версии таких серьезных проблем не возникает. В подтверждение моих слов, можно почитать опубликованную уважаемыми NNgroup статью https://www.nngroup.com/articles/scrolling-and-scrollbars/
Так как мобильная версия все чаще становится приоритетной из-за быстро растущей популярности выхода в интернет через мобильные устройства, решения, удобные для мобильной версии, применяются и в веб версии. Технологически сложно поддерживать две разные версии макетов для веб и мобильной версии. Поэтому я не призываю отказаться от этого элемента. Его использование часто бывает оправдано. Однако перед использованием лучше знать о недостатках.
Рассмотрим риски, на которые стоит обратить внимание
Причины, почему горизонтальный скрол все же популярен
Рекомендации
Вместо скролла в веб версии можно использовать ссылку “смотреть больше”. Это позволит пользователю увидеть нужный контент, а если ему понадобится больше, то он сможет перейти на страницу и посмотреть там. Да, это доработка, но не очень большая.
Если вы все же используете горизонтальный скролл, максимально сигнализируйте о возможности скролла. Добавляйте крупные стрелочки, на которые легко попасть мышью, и показывайте кусочек следующего блока.
По возможности дайте пользователю понять, сколько контента скрывается за скроллом. Так у пользователя появится понимание того, сколько контента не попало в его зону видимости (это должна быть не слишком большая цифра).
Механика работы
Когда проектируете этот элемент, не забудьте подумать о том, как пользователь будет с ним взаимодействовать. На мой взгляд, важно помнить о трех аспектах:
О событии, по которому происходит прокрутка блока. Первый вариант — боковыми стрелочками, кликая на которые мы инициируем прокрутку блока. Второй вариант — свайп. В веб версии обязательно наличие стрелочек, а вот в мобильной версии от них часто можно избавиться.
О количестве прокручиваемого контента после клика. Первый вариант — по одному новому блоку после клика на стрелочку, второй — полностью новая подборка после клика. Какой вариант выбрать зависит от содержимого блока. Например, если это галерея фильмов, то более логичным будет вариант с полностью новой подборкой. А в случаях, когда что-то нужно сравнивать, например, галерею с тарифами, то можно использовать первый вариант.
Также не забывайте обо всех необходимых состояниях — ховерах, о том, что происходит после первого клика.
Скролл в мобильной версии
Не смотря на то, что с мобильной версии намного меньше проблем со скроллом, тем не менее в интерфейсах часто можно встретить неудобную реализацию.
Бывает, что на макете дизайнер показывает только первую позицию скролла, забывая о том, как это будет работать при взаимодействии с блоком. В результате может выйти такая картина:
На первом экране все в порядке — мы видим первый блок в скролле и видим значимый кусок второго блока. Однако как только мы передвигаемся дальше, вылезают проблемы. Так как во время взаимодействия нужно показывать не только следущий блок, но и предыдущий, видимая область этих блоков стала минимальна. В таких случаях часто скролл перестает быть заметен, пользоваться таким блоком не комфортно.
Способов сделать горизонтальный скролл довольно много и правильное решение всегда зависит от большого количества факторов. Для примера покажу два совершенно разных решения для этой проблемы:
В первом случае показывается одна карточка и часть следующей. Для сигнализации о возможности скролла вправо или влево используются точки под карточками. Это решение рабочее, но подойдет оно далеко не всем. Например, если ваша карточка длинная и может не войти целиком в экран телефона, такое решение не подойдет.
Во втором случае ширина карточки рассчитана таким образом, чтобы пользователь всегда видел внушительный кусок следующей и предыдущей карточки.
Также не стоит забывать о контроле реализации. Плохая тормозная реализация способна нивелировать все ваши старания. В мобильных версиях сайтов скролл может работать заторможенно, в таким случае вероятный исход — закрытие вашего сайта. Обязательно проверяйте механику работы данного блока перед выходом в прод.
И еще одна маленькая полезность
Иногда бывает полезно последним элементом в скролле делать ссылку. Например, если выведено 10 самых популярных фильмов этой недели, то в конце списка можно поставить карточку со ссылкой на топ 50. Таким образом, если пользователя заинтересовал контент из скролла, но ему его показалось недостаточно, он сможет довольно просто продолжить смотреть более расширенную подборку на отдельной странице.
На этом все. Буду рада вашим комментариям и предложениям по интересующим темам для новых статей.
как сделать прокрутку html
Иногда требуется сделать прокрутку. Либо горизонтальную, либо вертикальную прокрутку html. Почему может не работать прокрутка?
Подробно о прокрутке в html
Прокрутка «overflow: auto»
За вывод полосы прокрутки отвечает свойство «overflow».
Свойство overflow может принимать несколько значений:
нажимаем исследовать элемент добавляем свойство overflow и далее можно перебирать.
Прокрутка «overflow: auto»
Перейдем к примерам. использования и вывода прокрутки в html :
Создаем блок div с текстом и стилями(«3 способа css»):
В свойствах заранее подразумеваем, что высота будет меньше предполагаемого текста.
Для прокрутки ставим «overflow: auto»:
Результат вывода прокрутки в html:
Как видим. при использовании «overflow: auto» произошел вывод только вертикальной прокрутки.
Из-за того, что по горизонтали, внутренний размер блока не превышен его внешнего размера!
Перейдем ко второму примеру прокрутки:
Прокрутка «overflow: scroll»
В принципе, по поведению scroll и auto похожи. вы можете потренироваться. заменить scroll на auto и обратно.
Зададим нашему блоку размер «width: 200px;»
Внутри него сделаем второй блок, который будет больше нашего выше приведенного размера «width: 500px;»
И для примера прокрутки используем «overflow: scroll;»
Разместим приведенный код прокрутки ниже:
Результат использования прокрутки «overflow: scroll;»
Мы можем наблюдать на примере выведенной прокрутки, что и вертикальная и горизонтальная прокрутка в примере присутствует!
Использовать горизонтальную или вертикальную прокрутку
К примеру. вам требуется показать только один вид прокрутки. либо горизонтальный:
Либо только вертикальную прокрутку:
Разберем пример выводи одного типа прокрутки.
Соответственно в зависимости от ваших потребностей меняем горизонтальную прокрутку букв «x» либо вертикальную прокрутку букв «y»