Как убрать горизонтальную полосу прокрутки | CSS
Искл., ежели содержимым является элемент, у которого свойство position имеет значение fixed .
длина окна:
divтысячадевятьсотдевяностодевятикилограммовый
То есть если элемент при direction: ltr; уводить за левый (при direction: rtl; — за правый) край страницы, то горизонтальной полосы прокрутки не будет.
direction: rtl;
тысячадевятьсотдевяностодевятикилограммовый
Можно запретить появление горизонтальной полосы прокрутки и обрезать выходящее за страницу содержимое, но это лишь усугубит проблему — чтобы читатель имел возможность прокрутить страницу, нужно будет разрабатывать и подключать JavaScript
длина окна:
html, body тысячадевятьсотдевяностодевятикилограммовый
Следует доработать вёрстку: при отзывчивой, сделанной специалистом, хорошо разбирающимся в CSS, проблем не должно возникать
длина окна:
body тысячадевятьсотдевяностодевятикилограммовый
Как отключить горизонтальную прокрутку css
Горизонтальная прокрутка в веб-дизайне: стоит ли ее использовать?
Когда вы думаете о «прокрутке» веб-сайтов и приложений, в первую очередь, вероятно, приходит на ум одно направление: вниз.
В этом есть смысл – практически каждая веб-страница структурирует свое содержимое по вертикали. Чтобы увидеть больше, просто прокрутите вниз с помощью мыши, трекпада или клавиатуры. Некоторые веб-сайты могут попытаться улучшить взаимодействие с пользователем с помощью анимированных всплывающих элементов или эффектов параллакса. Даже в этом случае ориентация прокрутки почти всегда остается вертикальной.
Вертикальная прокрутка работает отлично … но как насчет ее аналога по оси X, горизонтальной прокрутки? Вы могли подумать о добавлении этой более редкой функции на свой сайт. Но является ли метод горизонтальной прокрутки интуитивно понятным или даже полезным? Это лучше вертикальной прокрутки? И как это может обогатить ваш UX?
В этом посте я отвечу на все эти вопросы, а затем покажу вам, как создать базовую горизонтальную прокрутку с помощью пользовательского HTML и CSS, если вы считаете, что это хорошо подходит для вашего сайта.
Что такое горизонтальная прокрутка?
Горизонтальная прокрутка – это метод навигации по странице, при котором пользователь прокручивает влево и вправо, чтобы открыть содержимое по бокам окна или контейнера. Горизонтальную прокрутку можно выполнить, щелкнув и перетащив горизонтальную полосу прокрутки, проведя вбок на трекпаде рабочего стола или мышью трекпада, нажав клавиши со стрелками влево и вправо или проведя пальцем в сторону на сенсорном экране.
В то время как вертикальная навигация является основой подавляющего большинства веб-сайтов, мы видим горизонтальную гораздо реже. Это связано с тем, что горизонтальная прокрутка широко считается неэффективным и устаревшим методом пользовательского интерфейса, имеющим мало практических применений.
Это может показаться немного резким, поэтому давайте расширим его и обсудим, почему вы, вероятно, не слишком часто прокручиваете в сторону.
Недостатки горизонтальной прокрутки
Мнения о горизонтальной прокрутке неоднозначны как среди веб-дизайнеров, так и среди веб-пользователей. Даже я сам не слишком увлечен этим по нескольким причинам:
Это нарушает ожидания пользователей.
Вертикальная прокрутка – это норма навигации. За исключением редких стилистических украшений, каждая веб-страница структурирует свое содержимое по вертикали. Поэтому, естественно, пользователи будут ожидать прокрутки таким образом, а не слева направо.
Это нормально – время от времени нарушать правила дизайна, чтобы добавить визуального чутья и изюминки. Но игнорирование этой конкретной конвенции без четкой цели смутит и расстроит посетителей больше, чем увлечет. И многие просто предполагают, что ваша страница / элемент страницы сломан.
А как насчет сенсорных экранов? В то время как появление интеллектуальных мобильных технологий нормализовало жесты бокового смахивания (глядя на вас, Tinder), пользователи, естественно, будут прокручивать мобильный веб-сайт вниз, если их не попросят. Таким образом, обычно лучше оставить вертикальную прокрутку как на настольных, так и на мобильных сайтах.
У него высокая стоимость взаимодействия.
С точки зрения UX, стоимость взаимодействия – это количество усилий, которые требуется пользователю для выполнения действия, такого как взаимодействие с элементом страницы. Стоимость взаимодействия складывается из (1) того, насколько усердно нам приходится думать о задаче и (2) физических усилий, необходимых для выполнения задачи.
Вертикальная прокрутка имеет низкую стоимость взаимодействия. Опять же, мы этого ожидаем, поэтому нам не нужно думать, чтобы это сделать. Вертикальная прокрутка также эргономично эффективна благодаря колесу мыши, трекпаду или клавишам со стрелками.
Горизонтальная прокрутка, напротив, требует гораздо более высоких затрат на взаимодействие.
Мысленно мы должны приспособиться к новой ориентации прокрутки и обрабатывать ввод контента с нового направления экрана. Мы не привыкли к дополнительной когнитивной нагрузке, и это негативно сказывается на наших впечатлениях от просмотра. Пользователи, которым нужна горизонтальная полоса прокрутки, также должны найти этот элемент, что требует дополнительной работы.
Горизонтальная прокрутка также требует больших физических усилий от пользователей. Пользователи трекпада и мобильных устройств могут проводить пальцем в сторону, чтобы открыть контент, но это невозможно для пользователей настольных компьютеров, оснащенных стандартной мышью. Эти пользователи должны либо перейти к клавишам со стрелками, либо щелкнуть и перетащить полосу прокрутки.
Его легко упустить или проигнорировать.
Эта проблема возникает из-за отсутствия ожиданий – если пользователи не знают, что на веб-странице появляется горизонтальная навигация, они не будут ее искать, упуская из виду потенциально релевантный контент.
Четкие визуальные подсказки для горизонтальной навигации, такие как значки стрелок или информационный текст, могут частично решить эту проблему. Но есть шанс, что пользователи его упустят. Если они действительно замечают реплики, им все равно может быть не ясно, что на самом деле представляет собой скрытый контент. В этом сценарии большинство просто не будет беспокоиться о взаимодействии с контентом за пределами области просмотра.
Это создает проблемы для доступности.
Дополнительный размер прокрутки усугубляет трудности простой вертикальной прокрутки, особенно когда оба используются одновременно. Элемент страницы с горизонтальной и вертикальной прокруткой может дезориентировать, и его трудно использовать людям с двигательными нарушениями.
Для людей с физическими ограничениями, умственными ограничениями или просто меньшим опытом работы с технологиями горизонтальная прокрутка часто является ненужным препятствием, которого можно избежать с помощью лучшего дизайна.
Когда работает горизонтальная прокрутка
Учитывая проблемы с горизонтальной прокруткой, вы можете задаться вопросом, будет ли когда-нибудь такая функция полезной.
Но пока не исключайте этого. Есть несколько случаев, когда горизонтальная прокрутка может быть эффективной, если ее реализовать осторожно и точно. Давайте теперь рассмотрим его наиболее распространенные применения:
Чтобы скрыть вторичный контент
На любом веб-сайте вы хотите минимизировать количество прокруток, которые пользователи должны выполнять, чтобы достичь желаемого контента. Здесь может пригодиться горизонтальная прокрутка: вы можете сэкономить вертикальное пространство страницы, разместив специальный элемент, который показывает связанный контент из горизонтальной прокрутки.
Большинство реализаций этого метода четко указывают на функцию прокрутки и предлагают альтернативный метод навигации, такой как нажатие кнопки, для отображения большего количества контента. Например, пользователи могут горизонтально прокручивать галерею изображений или ссылки на миниатюры на сообщения в блогах или новостные статьи.
Отображение предложений по категориям
Кстати, контейнеры с горизонтальной прокруткой полезны для сегментирования контента по категориям. Пользователи прокручивают вертикально, чтобы найти интересующую их категорию, а затем вбок, чтобы найти конкретный продукт, видео, статью или другой тип элемента в этой категории.
Сайты электронной торговли используют этот метод для разделения своего каталога на типы товаров. Стриминговые платформы делают то же самое со своими фильмами и сериалами. Посмотрите, как Netflix интегрирует горизонтальную прокрутку в свой пользовательский интерфейс:
Также обратите внимание, что этот пример предлагает альтернативу прокрутки – кнопки со стрелками.
Навигация по большому изображению или визуальному элементу
Иногда один элемент может быть слишком большим для вашей страницы, и вы хотите уместить его в меньший элемент окна. Карты, изображения с большим количеством деталей и растянутые визуализации, такие как временные шкалы, – все это представляет собой проблему дизайна. Чтобы помочь пользователям перемещаться и исследовать большую 2D-плоскость, рассмотрите возможность использования горизонтальной прокрутки.
Однако обратите внимание, что в настоящее время метод перетаскивания более распространен, чем двойная вертикальная и горизонтальная прокрутка. Пользовательское тестирование полезно для определения того, какой подход лучше всего подходит для вашего конкретного экземпляра. В любом случае, эти большие визуальные элементы должны быть доступны для навигации с помощью клавиатуры.
Рекомендации по горизонтальной навигации
- Избегайте горизонтальной прокрутки на полных веб-страницах.
- Включите другие методы взаимодействия.
- Создавайте горизонтальные полосы прокрутки как вертикальные полосы прокрутки.
- Сделайте вариант горизонтальной прокрутки визуально заметным.
Итак, вы думаете, что горизонтальная навигация имеет место на вашем сайте? Вот несколько рекомендаций, о которых следует помнить:
1 Избегайте горизонтальной прокрутки полных веб-страниц.
Горизонтальная прокрутка никогда не должна заменять вертикальную прокрутку на всей веб-странице. Нарушение этого правила оттолкнет большинство пользователей.
Если вы хотите, чтобы разные разделы вашей главной страницы переходили по горизонтали, рассмотрите возможность запуска горизонтальной анимации с вертикальной прокруткой, как показано на этом впечатляющем веб-сайте дизайнерского агентства :
В этом примере пользователь выполняет прокрутку вниз. Поначалу появление СМИ справа неожиданно, но вы быстро улавливаете, что происходит.
2 Включите другие методы взаимодействия.
Даже если на вашей странице используется горизонтальная прокрутка, мы рекомендуем дать пользователям настольных компьютеров еще один способ раскрыть скрытый контент. Кнопка со стрелкой может иметь ту же функцию:
Мобильные пользователи будут испытывать меньше проблем с боковым смахиванием, поэтому кнопки на мобильных сайтах не нужны. Тем не менее, основная ориентация прокрутки должна оставаться вертикальной на устройствах с сенсорным экраном.
3 Создайте горизонтальные полосы прокрутки как вертикальные полосы прокрутки.
На рабочем столе горизонтальные полосы прокрутки должны быть доступны в своих контейнерах. Горизонтальные полосы прокрутки должны выглядеть и работать так же, как их вертикальные аналоги, для единообразия дизайна. Избегайте нестандартных стилей полос прокрутки, так как они помогают и не должны отвлекать внимание.
Есть несколько исключений для размещения видимых полос прокрутки. Если с обеих сторон контейнера есть кнопки, которые позволяют пользователям прокручивать, пользователи могут щелкать по ним вместо перетаскивания полосы прокрутки. Кроме того, не показывайте полосу прокрутки, если содержимое контейнера возвращается к началу в конце потока содержимого.
4 Сделайте вариант горизонтальной прокрутки визуально заметным.
Обязательно минимизируйте вероятность того, что посетители пропустят ваш контент, сообщив о возможности горизонтальной прокрутки.
В дополнение к индикаторам кнопок, таким как стрелки, вы можете настроить прокручиваемые контейнеры так, чтобы при наведении курсора мыши появлялась горизонтальная полоса прокрутки.
Или попробуйте показать фрагмент скрытого содержимого в прокручиваемом контейнере. Сайты электронной коммерции, такие как Patagonia, делают это для списков продуктов – обратите внимание на миниатюры продуктов, торчащие с обеих сторон контейнера для дисплея:
Наконец, также подойдет текст с инструкциями, например «Прокрутите, чтобы узнать больше». Попробуйте все эти реализации при создании прототипов и тестировании.
Как создать контейнеры с горизонтальной прокруткой в HTML и CSS
Когда элемент HTML – скажем,
Чтобы включить горизонтальную прокрутку, мы можем использовать свойство CSS overflow-x. Если присвоить значение прокрутки для переполнения х свойства элемента контейнера, браузер будет скрывать горизонтально перелив содержания и сделать его доступным с помощью горизонтальной прокрутки. Чтобы это работало, необходимо указать ширину как элемента контейнера, так и дочернего элемента (элемента в контейнере).
В этом примере я создал контейнерный элемент
с установленной шириной 1000 пикселей. Поскольку ширина
Вот HTML-код моего примера:
А вот соответствующий CSS-код:
Хотите конкретизировать причудливый элемент горизонтальной прокрутки? CSS Tricks, Codeburst и UX Collective предлагают подробные руководства, на которые вы можете ссылаться для создания пользовательских контейнеров.
Как отключить горизонтальную прокрутку
Если вы не установите ширину дочернего элемента в его родительском
Другое решение – установить ширину дочерних элементов на 100%. Это указывает дочернему содержимому переходить к следующей строке, чтобы избежать обрезки краем контейнера, независимо от ширины контейнера.
Прокрутка вбок
Для большинства из нас вертикальная прокрутка – это рефлекс, просто она имеет больше смысла, чем ее горизонтальная альтернатива. Однако горизонтальная прокрутка все же нашла место в современном веб-дизайне. При умеренном и преднамеренном внедрении этот метод может помочь структурировать ваши страницы и представить контент в удобной форме.
В конечном итоге вы разрабатываете для обычного посетителя, поэтому удобство использования предшествует любым стилистическим украшениям. Если у вас есть сомнения относительно элементов горизонтальной прокрутки, проверьте их на реальных пользователях (а не на других дизайнерах). Если обратная связь отрицательная, не бойтесь прибегнуть к другому подходу.
Как убрать горизонтальную прокрутку сайта
«…у меня проблема, если параметр padding: 20px; меняю хоть на 1 пиксель меньше 20ти то появляется горизонтальная прокрутка, что только не пробовал, кстати у вас она (прокрутка) тоже имеет место быть. Как избавится от этого?» Этот вопрос возник в одном из комментариев к статье о резиновой теме F2. В тот момент я не смог адекватно ответить и подсказать посетителю, как решить его проблему, потому как, у меня на мониторе горизонтальная прокрутка отсутствовала. Спустя некоторое время, работая с другой темой, я обратил внимание на появившуюся горизонтальную прокрутку в нижней части окна браузера. Возвращать изменённые коды в таблице стилей в исходное состояние не стал, а дописал маленькую строчку, которая выглядит вот так:
overflow-x: auto;
Вставить её нужно в блок: body
font-family: Georgia, Arial, Helvetica, sans-serif;
margin: 0px; padding: 0px;
background-size: color: #102722;
Не забудьте обновить файл, а затем, обновить страницу сайта. Прокрутка должна исчезнуть. Но, если полоса прокрутки всё же отображается, проверьте, какой масштаб страницы у вас установлен, он может быть увеличен. Не обязательно менять масштаб, может вам удобнее читать страницу именно в таком масштабе. Нужно лишь вместо слова «auto» вписать слово «hidden«, т.е., запретить прокрутку полностью, вот так:
Теперь, горизонтальная прокрутка уже точно не будет отображаться.
Поделиться ссылкой:
Ещё из этой рубрики
Как скрыть логин админа из Html — кода
Содержание:1 Как узнать имя админа2 Поделиться ссылкой: Как узнать имя админа Здравствуйте друзья! В предыдущей статье мы вроде бы как, затруднили взлом сайта путём изменения имени/логина администратора. Но.
Как сделать отступ в первой строке абзаца
Для придания тексту более удобной для чтения формы, применяют приём разделения длинного текста на абзацы, причём, в каждом абзаце первая строка имеет некоторый отступ слева. Чтобы добиться автоматического.
Как убрать кавычки из виджета «Рубрики» в шаблоне F2
Содержание:1 Спрятать или заменить символ Юникода Поделиться ссылкой: Спрятать или заменить символ Юникода В последнее время участились вопросы посетителей о том, как убрать “стрелочки” слева от ссылок.
Как создать градиенты в теме F2 без сервиса и без редакторов
Содержание:1 Как вставить линейный градиент в шапку блога2 Поделиться ссылкой: Как вставить линейный градиент в шапку блога Здравствуйте уважаемые друзья, подписчики и просто интересующиеся. В статье: “Дизайн сайдбаров в.
Как вставить картинку в шапку темы F2
Приветствую Вас, Друзья! Эта статья является продолжением предыдущего поста: Как сделать резиновую шапку для сайта. Сейчас мы рассмотрим, как изменять шрифты и их размер в заголовке и подзаголовке, как.
9 комментариев
Чудны дела твои, господи! Михаил, вчера я точно туда и вставляла эту строку и ни-че-го! А сейчас, пока календарь дописываю, нате, вам, пожалуйста. Как хочешь, так и понимай. В любом случае-спасибо. Пусть мне это особо не мешало, но приятнее без этих хвостов.
У меня все, как всегда-не срабатывает. Пол сантиметра прокрутки как было, так и есть.
Оксана, а ссылка есть на сайт? Я хочу посмотреть.
О! Что-то мне этот комментарий не пришел. Ссылка есть, конечно. greens-avenue.ru Но я удалила эти записи, раз не сработало. Добавить назад?
Оксана, а у меня есть вход на Ваш сайт? Я уже не помню, делали мы на этот сайт вход.
На него крооме меня никто входа не имеет ��
Оксана, если хотите, добавьте меня в пользователи, придумайте мне временный пароль и имя, и присвойте мне временно роль Администратор. Я зайду в админку и впишу код куда нужно. Потом переприсвоите роль на Подписчик или совсем удалите (по желанию). Имя и пароль пришлите мне по почте, чтобы в третьи руки не попало.
Полысеть можно, пока этого пользователя добавишь. То пароль не нравится, то имя надо не на русском. Отправила на почту которая у Вас в контактах указана.
Да, я когда первых десять посетителей добавлял в пользователи тоже чертыхался. Я обычно девчатам и ребятам пишу по почте свои имя и пароль через скайп или почту, а тут отослал по почте, а письмо не прошло. Пришлось по другому поступить. Но это опыт хороший, пригодится.
Отключить горизонтальную прокрутку
Хорошо, по какой-то причине моя веб-страница прокручивается слева направо и показывает много уродливого пространства.
Я искал результаты, но они просто сделали полосу прокрутки HIDDEN
Теперь это то, что я хочу, я хочу физически DISABLE функцию горизонтальной прокрутки. Я не хочу, чтобы пользователь мог прокручивать слева направо мою страницу только вверх и вниз!
Я пробовал: overflow-x:hidden в css на моем теге html , но он только сделал полосу прокрутки скрытой и не отключил прокрутку.
Пожалуйста, помогите мне!
Это может дать вам лучшее представление о том, о чем я говорю:
Это когда загружаются первые страницы:
И это после того, как я прокручу вправо:
12 ответов
Я создал UITableView с небольшой рамкой, например (0,0,50,50). Я хочу отключить горизонтальную прокрутку, но сохранить вертикальную прокрутку. Я установил self.table.bounces = NO , но tableview также не может быть прокручен вертикально. В результате анимация получается не такой уж совершенной. Так.
У меня есть UIView , как трамплин iPhone. Я создал его, используя UIScrollView и UIButtons . Я хочу отключить горизонтальную прокрутку на указанном scrollview. Я хочу только вертикальную прокрутку. Как я могу добиться этого?
Попробуйте добавить это в свой CSS
это мерзкое дитя вашего кода ��
замените его на
Поэтому, чтобы исправить это должным образом, я сделал то, что делали другие здесь, и использовал css, чтобы скрыть горизонтальную панель инструментов:
Затем в js я создал прослушиватель событий для поиска прокрутки и противодействовал попыткам пользователей выполнить горизонтальную прокрутку.
Я видел, как кто-то делал что-то подобное, но, очевидно, это не сработало. Однако это прекрасно работает для меня.
Я знаю , что уже слишком поздно, но в javascript есть подход, который может помочь вам обнаружить, что элемент html вызывает горизонтальное переполнение -> полоса прокрутки
Вот ссылка на пост о CSS трюках
это может вернуть что-то вроде этого:
затем вы просто удаляете дополнительную ширину из div или устанавливаете ее max-width:100%
Надеюсь, это поможет!
Это исправило проблему для меня :]
Попробуйте этот вариант, чтобы отключить прокрутку по ширине только для тела , весь документ просто является телом body
koala_dev ответил, что это сработает:
И MarkWPiper комментарии, которые «:-/ вызвали прокрутку касания / импульса, чтобы перестать работать на iPhone»
Решение для сохранения контакта / импульса на iPhone состоит в том,чтобы добавить эту строку внутри блока css для html, тела:
Если вы хотите отключить горизонтальную прокрутку по всей ширине экрана, используйте этот код.
Это работает лучше, чем «100%», потому что он игнорирует родительскую ширину и вместо этого использует видовой экран.
Есть ли способ отключить правую горизонтальную прокрутку, но разрешить левую горизонтальную прокрутку? let touches = [] window.addEventListener(‘touchmove’, event => , false) window.addEventListener(‘touchstart’, event => .
Как отключить горизонтальную прокрутку в UICollectionView ? Я попытался добавить это: self.scrollDirection = UICollectionViewScrollDirectionVertical; до 30, но это не сработало. Я хочу иметь только вертикальную прокрутку. Я не использую Interface builder.
Вы можете попробовать все это на нашей странице html..
2-й способ Вы можете использовать следующее в теге CSS body:
Это приведет к удалению полосы прокрутки.
Теперь я ищу больше.
Ответ Koala_dev будет работать, но в случае, если вам интересно, это причина, по которой он работает:
Я просто должен был справиться с этим сам. В конце концов, я нашел этот метод самым простым и полезным. Просто добавьте
К вашему внешнему родителю. В моем случае это выглядит так:
Вы должны использовать overflow-x , потому что если вы используете просто использовать overflow , вы также отключаете вертикальную прокрутку, а именно overflow-y
Если вертикальная прокрутка по-прежнему отключена, вы можете включить ее явно с помощью:
Я знаю, что это несколько неправильный способ, потому что, если бы все было настроено хорошо, не пришлось бы использовать этот быстрый и грязный метод.
Вы применяете приведенный выше стиль или можете создать функцию в javaScript , чтобы решить эту проблему
Вы можете переопределить событие прокрутки тела с помощью JavaScript и сбросить горизонтальную прокрутку до 0.
Я не советую этого делать, потому что это ограничивает функциональность для пользователей с маленькими экранами.
Похожие вопросы:
я хочу отключить вертикальную прокрутку для мобильных устройств. с помощью : body работает для обычных браузеров, но на мобильных устройствах, если есть элемент шире экрана,он.
Я пытался выяснить, как отключить горизонтальную прокрутку в A UITextView (я видел много вопросов по этому поводу, но ни один из них мне не помог). Проблема прокрутки возникает, когда я поворачиваю.
Я использую оригинальное приложение Gallery из исходного кода ICS. А теперь дело в том, что я хочу отключить горизонтальную прокрутку и реализовать ее с помощью вертикальной прокрутки в сетке. Как.
Я создал UITableView с небольшой рамкой, например (0,0,50,50). Я хочу отключить горизонтальную прокрутку, но сохранить вертикальную прокрутку. Я установил self.table.bounces = NO , но tableview.
У меня есть UIView , как трамплин iPhone. Я создал его, используя UIScrollView и UIButtons . Я хочу отключить горизонтальную прокрутку на указанном scrollview. Я хочу только вертикальную прокрутку.
Есть ли способ отключить правую горизонтальную прокрутку, но разрешить левую горизонтальную прокрутку? let touches = [] window.addEventListener(‘touchmove’, event => .
Как отключить горизонтальную прокрутку в UICollectionView ? Я попытался добавить это: self.scrollDirection = UICollectionViewScrollDirectionVertical; до 30, но это не сработало. Я хочу иметь только.
Я хочу отключить горизонтальную полосу прокрутки на iPad в Safari, когда нахожусь на своем сайте. Я пробовал e.preventDefault , но это, кажется, отключает как вертикальную, так и горизонтальную.
Я пытаюсь отключить горизонтальную прокрутку на веб-сайте, но разрешаю вертикальную прокрутку. У меня есть скрипт, который работает как слайдер, сдвигая ‘body’ страницы влево и открывая больше.
Практическое руководство: реализуем горизонтальную прокрутку секции на Flexbox
В этой статье мы рассмотрим решение повседневной задачи: как создать горизонтально прокручиваемую секцию сайта? Если вкратце, ответ — Flexbox.
Давайте разберёмся с этим более детально.
Каркас
Взгляните на эту разметку. Это простой блок section с несколькими вложенными div :
Стили
Плохой дизайн никто не любит, поэтому давайте сделаем страничку более опрятной:
Сперва мы явно задаём ширину и высоту корневых элементов равной 100% . Затем мы определяем цвет фона, убираем отступ у body и центрируем вложенный в него элемент.
Для наглядности применим стили к этому элементу :
С первым свойством всё понятно, второе указывает секции всё время занимать 100% ширины родительского элемента, а третье гарантирует, что высота секции всегда будет не менее 200px . Вот, что получилось на данном этапе:
Поместим все блоки card—content в секцию card и снова займёмся стилями. Сперва сделаем card flex-контейнером:
Затем займёмся .card—content :
Третья строка гарантирует, что ширина каждой карточки будет не меньше 200px , всё остальное просто и понятно. Вот результат:
Как вы могли заметить, прокручивается вся страница. Так происходит, потому что в секцию card помещаются не все элементы.
Исправим это так:
И теперь прокручивается только секция:
Прячем полосу прокрутки
Красоты ради можно спрятать полосу прокрутки. Для webkit-браузеров (Chrome и Safari) есть очень простой способ:
Согласитесь, так страничка выглядит лучше.
Способы применения
В качестве примера мы использовали пустые блоки, но применить этот приём можно во многих приложениях. Вот пара примеров:
Похожие публикации:
- Как сделать картинку по центру в html без css
- Как сделать кнопку css
- Как сделать красивую рамку css
- Как сделать линию в css after
Как создать горизонтально прокручиваемые контейнеры
Контейнеры с горизонтальной прокруткой становятся все более популярными. Особенно среди мобильно оптимизированных сайтов, где они используются для уменьшения высоты веб-страниц.
После реализации нескольких таких элементов я захотел выяснить, как с помощью минимального объема кода создать горизонтальную прокрутку, которая корректно работает, на всех типах пользовательских устройств.
Сначала создадим контейнер и дочерние div внутри него, которые будут прокручиваться по горизонтали.
Card
Card
Card
Card
Card
Card
Card
Card
Card
