Товаров: 0 (0р.)

Скролл горизонтальный: Горизонтальный скролл становится модным. Разберемся в этом

Содержание

Горизонтальный скролл становится модным. Разберемся в этом

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


Оригинальное название публикации: “Иск против горизонтального скролла”…

Время от времени всё переосмысливается. А значит нет ничего удивительного в том, что сайты с горизонтальным расположением контента становятся модными. Это смелая и впечатляющая дизайнерская инновация, так как в настоящее время в интернете подавляющее большинством веб-сайтов используют вертикальную прокрутку.

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

Избравшие «стезю» горизонтальной прокрутки, рассуждают с позиции собственного выбора. А организации, которые предпочли данный метод, провозглашают свои сайты произведением искусства.


(http://www.guillaumejuvenet.com/)

Горизонтальные сайты — это заявление о собственной уникальности и нежелании вписываться в общественные рамки. В результате, торговая марка, использующая такую конструкцию сайта, часто зарабатывает себе репутацию «причудливой» и «ушлой».

Почему некоторые используют горизонтальный скролл

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

Ставка на мобильные устройства может быть не такой удачной идеей

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

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

Поскольку экраны мобильных телефонов или планшетов и экраны десктопов считаются достаточно специфичными относительно друг друга, сходство здесь не применимо. Нельзя использовать горизонтальное пролистывание на настольном компьютере, просто потому что оно распространено на планшетах и телефонах.

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

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

Продуктивное использование вертикального пространства для контентной области

В вертикальном макете, весь контент вне зависимости от степени его важности, идёт друг за другом. Ключевую информацию можно выделить только оформлением, а не позиционированием на странице. Единственное что может дизайнер — разместить ключевую информацию в начале страницы.

В отличие от популярных вертикально-ориентированных макетов, горизонтальные макеты имеют одно преимущество. Они аккуратно предоставляют лишь небольшую часть информации в области горизонтального скролла. А ключевую информацию можно закрепить в вертикальном пространстве, обратив на неё внимание пользователей не только оформлением, но и позиционированием.

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

(

http://qandhlondon.com/

)

Cайты с горизонтальным расположением контента больше всего подходят для ситуаций, когда необходимо единовременно отображать несколько объектов: графических изображений, небольших информационных блоков, групп иконок или превью, ссылающиеся на более подробное описание.

Мобильные версии “десктопных” сайтов, или веб-сайты, рассчитанные на просмотр с мобильных устройств — вот сфера применения, где горизонтальный скролл полностью уместен. Однако, он также хорошо подходит и ряду других сайтов, позволяя им отображать большое количество информации простым и выгодным способом.

Проблема юзабилити


(

http://movingislands.com/en

)

Хотя множеству пользователей сегодня знакомо и даже привычно горизонтальное пролистывание (когда меняется всё наполнение страницы), горизонтальную прокрутку (с плавной подгрузкой контента) многие по-прежнему осуждают. Она продолжает получать отрицательные отзывы от многих пользователей, и поэтому применять ее следует с осторожностью. Ее, как правило, используют, чтобы проявить индивидуальность, например, заявить о торговой марке. Но даже при таком использовании, многим людям это непривычно.

Пользователи игнорируют блоки сайтов с горизонтальной прокруткой

Одна из основных реакций, которую вызывает горизонтальный скроллинг, заключается в игнорировании разделов с ним. Так как это провоцирует выход пользователя из его зоны комфорта.

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


(http://www.lorenzobocchi.com/)

Главным образом так происходит, потому что такая форма использования не соответствует ожидаемой схеме функционирования и в результате не является приемлемой или значимой.

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

Как же правильно?


(

http://www.themobileplaybook.com/en-us/#/overview

)

Что же делать, если вы все-таки хотите реализовать у себя на сайте горизонтальную прокрутку и не терять при этом пользователей? Все на самом деле просто — добавить дополнительные возможности навигации.

Добавьте в механику горизонтального скроллинга меню, которое позволит не только перемещаться от одного раздела к следующему, но также перескакивать некоторые разделы совсем. Это принесет гибкости и воодушевит большее количество пользователей просматривать интересующие их разделы.

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

Что следует принимать во внимание


(

http://www.richard-hill.org.uk/

)

Хотя отношение к использованию горизонтальной прокрутки медленно меняется с приходом новых технологий, таких как сенсорные экраны, планшеты, ПК в форм-факторе моноблоков с тачскрином и т.д., данный метод все еще не доминирует.

В аналоговых клавиатурах легче манипулировать клавишами «вверх/вниз», чем «вправо/влево». А вот на тачпаде добавление новых жестов будет более удобным при реализации горизонтального скролла.

Скорость прокрутки также должна быть оптимизирована. Слишком быстрый скроллинг может вызвать головную боль, а слишком медленный может сильно раздражать.

Несмотря на тот факт, что мы привыкли читать слева направо, медленно прокручивая страницу вниз, эта привычка сейчас меняется. С появлением электронных книг и различных приложений для смартфонов, планшетов и тачпада, люди постепенно привыкают и к перелистыванию при чтении. Однако, всегда важно принимать во внимание, то с чем пользователи могут столкнуться при внедрении новых концепций в повседневную жизнь.

В заключение


(

http://www.archi-graphi.fr/

)

Раз горизонтальная прокрутка пришлась кстати на мобильных устройствах с тачскринами, это не значит, что она будет столь же популярной на десктопах. Не стоит «выходить за рамки» только для того, чтобы выделиться из толпы, но пробуйте, если действительно верите в такой подход. Однако даже в этом случае не упускайте из внимания комфорт пользователей, ибо это вы зависите от них, а не наоборот.

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

Переводчик: Аня, тестировщик Mockup editor SletchBuilder

лучшие практики — CMS Magazine

В июле 2014 года в интернете уже насчитывалось 996 миллионов сайтов. Часть из них составляет прямую конкуренцию вашему ресурсу: пытается выйти на рынок или увеличить имеющуюся долю за ваш счёт. Они пытаются привлечь тех же пользователей, что и вы. Или, что еще хуже, они пытаются откусить кусок от вашего пирога или пользовательской базы. Разумеется, точное количество конкурентов зависит от направления деятельности, целевой аудитории, масштаба компании ­— регионального, национального или международного — и многих других факторов.

Но после семи лет работы в SEO я могу вас заверить, что конкуренция есть на любом рынке. Да, в некоторых отраслях она выше, и они развиваются быстрее. Очевидно, что в интернете, где конкуренция предельно высока, бренды особенно жаждут выделиться. Вопрос только в том, как это сделать.

Сильный выразительный веб-дизайн — один из лучших способов обратить на себя внимание. Ведь нам нужно, чтобы сайт «зацепил» пользователей уже в первые секунды — прежде чем они заскучают и отправятся смотреть свежее видео с котиками.

Больше не нужно искать и обзванивать каждое диджитал-агентство
Создайте конкурс на workspace.ru – получите предложения от участников CMS Magazine по цене и срокам. Это бесплатно и займет 5 минут. В каталоге 15 617 диджитал-агентств, готовых вам помочь – выберите и сэкономьте до 30%.
Создать конкурс →

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

Горизонтальный скроллинг (он же горизонтальная навигация) всегда был предметом для споров веб-дизайнеров и довольно долго считался провальным ходом. Как бы то ни было, он появился ещё на заре интернета и иногда становится трендом — причём настолько мощным, что какое-то время (правда, недолго) считается самым популярным и современным решением.

Развитие сенсорных устройств и освоение пользователями свайпинга спровоцировали возвращение горизонтального скроллинга. Может быть, именно благодаря пролистывающему движению они стали привыкать к горизонтальной навигации. Хорошо продуманный сайт с горизонтальной прокруткой способен привлечь внимание пользователей, заставить их задержаться на нём подольше и запомниться. Как же этого добиться?

Один из самых известных сайтов с горизонтальным скроллингом после редизайна — MySpace

Спросите себя: действительно ли мне нужен горизонтальный скроллинг?

Прочитав этот вопрос в статье о лучших практиках горизонтальной прокрутки вы, должно быть, удивитесь. Тем не менее, вопрос вполне оправдан. Учитывая спорное отношение к горизонтальному скроллингу со стороны дизайнеров и UX-специалистов, стоит всерьёз задуматься о том, нет ли других способов привлечь к себе внимание. Согласно исследованию UX-гуру Якоба Нильсена, информацию, скрытую за боковыми «полями» страницы, находит только 1% пользователей. С другой стороны, правильный подход к горизонтальному скроллингу может сделать пользовательский опыт интересным. Рассмотрим несколько примеров выразительного сочетания горизонтальной прокрутки с параллакс-эффектом. В конце концов, эта статья посвящена именно тому, как, используя горизонталь, добиться отличного UX.

Правильный горизонтальный скроллинг: художник С.Л. Холлоуэй (C.L. Holloway) использует его, чтобы имитировать прогулку по картинной галерее с его работами

Когда горизонтальный скроллинг — лучшее решение c точки зрения UX

По мнению Демиена Риса (Damian Rees), есть 4 случая, когда горизонтальная прокрутка делает пользовательский опыт лучше:

  1. На сайте много картинок (например, сайт о фотографии или сайт-портфолио)
  2. Сайт содержит визуальный контент крупного формата, который не воспринимается быстро (например, карта)
  3. Структура ресурса представляет собой несколько разделов или слайдов в приложении
  4. Крупный каталог товаров, где должно быть удобно просматривать различные категории
Reverse Buro — отличный пример сайта-портфолио с горизонтальным скроллингом

Тщательное планирование

Любой веб-дизайнер знает, что всё начинается с планирования. Однако спустя некоторое время многие расслабляются и начинают перепрыгивать эту ступеньку. Сайт с горизонтальным скроллингом требует особо тщательного планирования, создания бумажных прототипов и макетов. Вы должны заранее продумать, что и как будет работать на сайте. Придётся учесть множество моментов и, поскольку большинство дизайнеров и пользователей не так часто сталкиваются с подобными решениями, планирование горизонтального сайта может показаться сложнее, чем планирование вертикального.

Горизонтальная навигация

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

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

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

Основная навигация

Горизонтальный скроллинг не отменяет главной цели любого сайта — донести информацию до пользователей. Поэтому принципы хорошей навигации здесь так же актуальны. Убедитесь, что с помошью простого и всегда заметного меню посетители легко доберутся до нужной страницы, особенно до главной. Так они смогут полюбоваться уникальным дизайном, а затем узнать о вашей компании и продуктах, которые вы предлагаете.

Сайт фотографа Алекса Фуэраса (Alex Fueras Photography) — отличный пример простой основной навигации в боковом меню и футере, которая обеспечивает быстрый доступ ко всем страницам.

Используйте подсказки

Важно понимать, что горизонтальные сайты не настолько интуитивно понятны пользователям, как вертикальные, которые они видят каждый день по многу раз. У них могут возникнуть трудности с пониманием того, как работает тот или иной элемент. Ипользуйте подсказки. Даже если вам всё кажется предельно ясно, пользователи могут воспринимать это иначе, и случайному кликанью по элементу они наверняка предпочтут подсказку.

Кому понравится чувствовать растерянность и гадать, как же работает эта штука, когда можно просто прочитать немного текста? Я готов повторять это снова и снова: если посетители не сумеют разобраться во всём достаточно быстро, они просто уйдут.

Чтобы показать пользователям, что сайт скроллится горизонтально, HereDesign использует простые стрелки.

Не пренебрегайте контентом

При работе над горизонтальным сайтом дизайн нередко превращается в самоцель. Чаще всего такая угроза существует на трендовых сайтах, богатых визуальным контентом. Не стоит забывать о настоящей цели сайта, которая только в очень редких случаях звучит как «чтобы пользователи просто смотрели все эти крутые картинки». Убедитесь, что на сайте присутствует информация о бизнесе, продуктах и услугах, контактная информация, формы заказа и т.д.

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

 

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

Программирование

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

Здесь существует несколько подходов.Вот отличный урок, из которого вы узнаете, как создать отличный и функциональный сайт с помощью базовых элементов HTML и CSS. Это только один способ, кроме него существуют и другие.

Последнее предупреждение (Да, ещё одно!)

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

Горизонтальный скроллинг требует от пользователей больших усилий: надо наводить курсор мыши на определённые объекты, перетаскивать ползунок зажатой кнопкой мыши или постоянно нажимать на неё. Кроме того, иногда горизонтальная прокрутка происходит рывками, и это тоже плохо сказывается на пользовательском опыте. Наконец, помните, что посетители сайта привыкли не только пролистывать, но и просматривать страницы по вертикали. Горизонтальная прокрутка — неудачное решение для страниц, где много текста.

Если вы по-прежнему уверены, что на вашем сайте горизонтальный скроллинг придётся очень кстати — вперёд! Гавное — всегда думайте о пользователях. Сайт должен быть не просто красивым, но и удобным — чтобы люди могли быстро найти нужную им информацию и захотели приходить за ней снова и снова.

Скроллинги бывают разные. Мало придумать отличную идею, важно еще ее эффектно воплотить в жизнь.

Ищете команду, способную не только выдавать высококлассный креатив, но и качественно его реализовывать? Обязательно воспользуйтесь рейтингом креативности веб-студий.

Во-первых, он независимый и объективный.

Во-вторых, вы сможете сразу изучить карточки или сайты его участников.

В-третьих, помимо общего зачета, в рейтинге креативности разработчиков сайтов было сформировано несколько подрейтингов относительно количества побед в каждом из 6 конкурсов: «Рейтинг Рунета», «Золотой сайт», Webby Awards, CSS Design Awards, Awwwards, а также FWA.

Оригинал: http://usabilitygeek.com/horizontal-scrolling-user-experience-best-practices/

Как сделать горизонтальный scroll на странице



У меня есть div, в котором размещены внутренние дивы, мне нужно сделать так, чтобы все внутренние дивы были выстроены в линию и отображалась горизонтальная полоса прокрутки (я знаю, что это звучит безумно, но мне это нужно). Я попробовал container width auto и overflow scroll, но ничего.

Как это сделать?

мой markup:

   <!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-overflow</title>
  <style>
  body{
    width: auto;
  }
  #items{
  overflow-x: scroll;
  width: auto;
  }
  .item{
     display: inline-block;
     width: 400px;
     height: 100px;
     border:1px solid;
  }
  </style>
 </head>
 <body>

        <div>
           <div>
             Item content
           </div>
           <div>
             Item content
           </div>
           <div>
             Item content
           </div>
           <div>
             Item content
           </div>
           <div>
             Item content
           </div>
           <div>
             Item content
           </div>
        </div>

 </body>
</html>
html css scroll horizontal-scrolling
Поделиться Источник testCoder     14 ноября 2012 в 12:44

3 ответа

  • Горизонтальный Ион-scroll не работает

    В проекте, который я делаю, я использовал ion-scroll два раза и работает идеально (вертикальный режим), но теперь я пытаюсь сделать горизонтальный scroll и не работает, scroll появляется, но я не могу scroll ничего. Код HTML прост: <ion-scroll direction=x class=box> <div></div>…

  • Горизонтальный iScroll не может scroll вертикальный?

    Я скачал iScroll и использую горизонтальный scroll. Работает отлично, за исключением того, что если содержимое и horizontal scrolldiv длиннее экрана устройства, вы не можете scroll вниз, чтобы увидеть содержимое ниже горизонтального scroll. Как я могу решить эту проблему? Скачано с:…


23

Используйте white-space: nowrap; на #items

#items{
    overflow-x: scroll;
    width: auto;
    white-space: nowrap;
}

DEMO

Поделиться Zoltan Toth     14 ноября 2012 в 12:47


3

просто дайте #items высоте и overflow-x:auto.

#items{
      overflow-x: auto;
      width: auto;
       height: 200px;
      }

Поделиться brightboy2004     14 ноября 2012 в 12:51


0

<div>
  <div>
    <div>
      <table>
        <tr>
          <td>  Your Value  </td>
        </tr>
      </table>
    </div>
  </div>
</div>

Поделиться test     23 ноября 2013 в 22:37

  • Отключить горизонтальный Scroll на Div

    Существует кроссбраузерная дилемма, особенно сейчас, когда safari использует внутренний механизм scroll, который плавает сверху. Когда div с фиксированной высотой содержимого становится больше, чем div, нам нужна полоса scroll, но полоса прокрутки убирает некоторую ширину и, таким образом,…

  • Заменить вертикальный scroll на горизонтальный scroll ванильный javascript

    Я хочу отключить и заменить вертикальный scroll на горизонтальный в Vanilla JavaScript. Я блокируюсь, когда пытаюсь заменить свои значения scroll. Я верю, что есть простое простое (действительно простое) решение этой проблемы ! /* We define our function */ function…

Похожие вопросы:


Как сделать горизонтальный scroll на колесе мыши scroll?

Только что, случайно, я наткнулся на http: / / www.benekdesign.com/ . Здесь на колесе мыши scroll он выполняет горизонтальное scroll. Честно говоря, мне не нравилась эта особенность. Это немного…


Горизонтальный scroll бар для div

Пожалуйста, найдите DEMO здесь . Я пытаюсь получить горизонтальный scroll в div, но в текущем коде появляется только вертикальный scroll. Мне нужно, чтобы весь список ul был в одной строке, значит,…


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

Я использую scrollView без каких-либо listView или gridview. Я только что добавил к нему те же представления, но знаю, что хочу программно scroll к определенной позиции. Возможно ли это ?…


Горизонтальный Ион-scroll не работает

В проекте, который я делаю, я использовал ion-scroll два раза и работает идеально (вертикальный режим), но теперь я пытаюсь сделать горизонтальный scroll и не работает, scroll появляется, но я не…


Горизонтальный iScroll не может scroll вертикальный?

Я скачал iScroll и использую горизонтальный scroll. Работает отлично, за исключением того, что если содержимое и horizontal scrolldiv длиннее экрана устройства, вы не можете scroll вниз, чтобы…


Отключить горизонтальный Scroll на Div

Существует кроссбраузерная дилемма, особенно сейчас, когда safari использует внутренний механизм scroll, который плавает сверху. Когда div с фиксированной высотой содержимого становится больше, чем…


Заменить вертикальный scroll на горизонтальный scroll ванильный javascript

Я хочу отключить и заменить вертикальный scroll на горизонтальный в Vanilla JavaScript. Я блокируюсь, когда пытаюсь заменить свои значения scroll. Я верю, что есть простое простое (действительно…


css горизонтальный scroll запрос

поэтому я пытаюсь иметь горизонтальный scroll для меню div для мобильных устройств, и я использую http://jsfiddle.net/v2Ypj/ , и это казалось довольно прямолинейным, поэтому я использовал .submenu…


Grails, горизонтальная scroll страницы, как я могу это сделать

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


горизонтальный scroll на втором div

Я застрял на проблеме. Я создал раздел, который выглядит как таблица HTML. Но я не использовал для этого тег table. Я просто использовал HTML и CSS для достижения указанной цели. Теперь проблема в…

overflow-x | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+1.0+9.5+3.0+1.5+2.1+2.0+

Краткая информация

Значение по умолчаниюvisible
НаследуетсяНет
ПрименяетсяК блочным элементам
Процентная записьНеприменима
Ссылка на спецификациюhttp://www.w3.org/TR/css3-box/#overflow-x

Версии CSS

Описание

Свойство overflow-x управляет отображением содержания блочного элемента по горизонтали, если контент целиком не помещается и выходит за область справа или слева от блока.

Синтаксис

overflow-x: auto | hidden | scroll | visible

Значения

visible
Отображается все содержание элемента, даже за пределами установленной ширины.
hidden
Отображается только область внутри элемента, остальное будет скрыто.
scroll
Всегда добавляется горизонтальная полоса прокрутки.
auto
В зависимости от браузера, в основном, горизонтальная полоса прокрутки добавляется только при необходимости.

Пример

HTML5CSS 2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>overflow-x</title>
  <style>
   .layer {
    overflow-x: scroll; /* Добавляем полосу прокрутки */
    width: 300px; /* Ширина блока */
    height: 150px; /* Высота блока */
    padding: 5px; /* Поля вокруг текста */
    border: solid 1px black; /* Параметры рамки */
    white-space: nowrap; /* Запрещаем перенос строк */
   } 
  </style>
 </head>
 <body> 
  <div>
   <h3>Duis te feugifacilisi</h3>
   <p>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.</p>
  </div> 
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства overflow-x

Объектная модель

[window.]document.getElementById(«elementID»).style.overflowX

Горизонтальный скроллинг: дизайнерская «фишка» или важный элемент UX

  1. Главная
    2. /
  2. Блог
    3. /
  3. Горизонтальный скроллинг: дизайнерская «фишка» или важный элемент UX

Скроллинг — не только колёсико мыши. В более широком смысле это понятие обозначает, что содержимое информации находится в движении по вертикали или горизонтали.

Неважно, о какой форме информации идёт речь — тексте или изображении. На содержании информации скроллинг никоим образом не сказывается, но он является очень важным элементом UX. Эта аббревиатура с английских слов «User eXperience» может быть расшифрована как «Опыт взаимодействия». Речь идёт о том, что чувствует человек в том или ином случае, какой, например, у него UX, если он нечаянно наступил в лужу, какой UX , если он просматривает сайт с горизонтальным скроллингом.

Стоит ли использовать горизонтальный скроллинг на сайте?

Проблемы UX рассматриваются специалистами ИТ-технологий очень пристально. Речь идёт об успешности сайта, а сайты не делаются понапрасну. По статистике на июнь 2014 года в интернете было 996 млн.сайтов, и вряд ли найдётся хоть один, у которого нет конкурентов. Стало быть, кроме SEO-продвижения, создателю сайта надо всеми силами сделать своё детище «из ряда вон». А это непросто.Тут-то дизайнер и вспоминает про горизонтальный скроллинг. Таких сайтов немного, и значит есть шанс что сайт запомнится или привлечёт большее внимание. Но возможно и обратное. Большинство пользователей привыкли переходить со страницы на страницу с помощью мыши или стрелок на клаве, а двигать ползунок хочется не каждому. Поэтому большинство специалистов UX относится к горизонтальной прокрутке сайта с большой осторожностью, если не сказать — негативно.

Но не всё так однозначно. Успешные сайты с горизонтальной прокруткой существуют и приносят их владельцам ощутимую пользу. Эти сайты создавались не только с использованием выигрышного дизайна. Но и с тщательной предварительной проработкой всех вопросов. Восприятие горизонтального скроллинга облегчается, если на сайте есть подсказки, помогающие посетителю сориентироваться. Очень важно качество содержания сайта, хороший контент — краеугольный камень каждого сайта, с оригинальным типом прокрутки — тем более.

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

 

Почитать о нас можно тут Узнать какие мы предоставляем услуги здесь

Горизонтальный скролл. Когда и где использовать | by Ksenia Toloknova | BehanceRussia

Эта статья входит в цикл моих статей “Шкатулка с секретами”, в ней я делась своими знаниями о работе и особенностях применения различных компонентов. Сегодня я хочу поговорить о таком популярном, но в тоже время спорном приёме, как горизонтальный скролл.

Примеры использования слайдеров на сайтах https://yandex.ru/ https://www.ivi.ru/ https://www.raiffeisen.ru/ и https://junior.mts.ru

На сайтах с большим количеством информации дизайнеры охотно прибегают к использованию горизонтального скролла, чтобы сократить высоту страниц и контролировать объем получаемой пользователем информации.

К сожалению, данное решение часто работает не так хорошо, как хотелось бы. Основная причина заключается в том, что в веб версии пользователи до сих пор крайне неохотно работают с горизонтальным скроллом. Это решение чаще других других вызывает сильные негативные эмоции. При этом в мобильной и планшетной версии таких серьезных проблем не возникает. В подтверждение моих слов, можно почитать опубликованную уважаемыми NNgroup статью https://www.nngroup.com/articles/scrolling-and-scrollbars/

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

  1. Будьте готовы к тому, что пользователи часто не будут обращать внимание на горизонтальный скролл в веб версии. Даже если поставить стрелочки по бокам, вероятность того, что пользователь обратит на них внимание, довольно мала. Не размещайте критически важную информацию таким образом.
  2. Даже если пользователь обратит внимание на возможность скролла, он, вероятно, просто не захочет с ним взаимодействовать. Причина проста — это довольно трудоемкое действие. Нужно навести мышью на небольшую стрелочку, потом кликнуть по ней и ждать, когда прогрузится новый контент.
  1. Горизонтальный скролл очень часто является единственно возможным адекватным решением для мобильной версии. Поддержка принципиально разных версий внешнего вида одного и того же блока для разных версий отображения(веб, планшет, мобильная) — сложно не только для дизайна, но и для разработки. Такие решения нельзя назвать оптимальными.
  2. Это решение позволяет показать большое количество контента, не перегружая страницу. Например, при отображении изображений в галерее горизонтальная прокрутка позволяет пользователю увидеть небольшую часть. Это дает возможность быстро понять, релевантна ли эта информация его запросу.
  3. Горизонтальная прокрутка экономит много места на вертикальном экране. Макет гораздо более гибкий, ведь добавлять контент можно в обоих направлениях — вертикальном и горизонтальном.
  4. Горизонтальная прокрутка позволяет пользователям просматривать намного больше разной по смыслу информации, поэтому ее часто используют на главной и разводящих страницах.

Вместо скролла в веб версии можно использовать ссылку “смотреть больше”. Это позволит пользователю увидеть нужный контент, а если ему понадобится больше, то он сможет перейти на страницу и посмотреть там. Да, это доработка, но не очень большая.

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

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

Когда проектируете этот элемент, не забудьте подумать о том, как пользователь будет с ним взаимодействовать. На мой взгляд, важно помнить о трех аспектах:

О событии, по которому происходит прокрутка блока. Первый вариант — боковыми стрелочками, кликая на которые мы инициируем прокрутку блока. Второй вариант — свайп. В веб версии обязательно наличие стрелочек, а вот в мобильной версии от них часто можно избавиться.

О количестве прокручиваемого контента после клика. Первый вариант — по одному новому блоку после клика на стрелочку, второй — полностью новая подборка после клика. Какой вариант выбрать зависит от содержимого блока. Например, если это галерея фильмов, то более логичным будет вариант с полностью новой подборкой. А в случаях, когда что-то нужно сравнивать, например, галерею с тарифами, то можно использовать первый вариант.

Также не забывайте обо всех необходимых состояниях — ховерах, о том, что происходит после первого клика.

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

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

На первом экране все в порядке — мы видим первый блок в скролле и видим значимый кусок второго блока. Однако как только мы передвигаемся дальше, вылезают проблемы. Так как во время взаимодействия нужно показывать не только следущий блок, но и предыдущий, видимая область этих блоков стала минимальна. В таких случаях часто скролл перестает быть заметен, пользоваться таким блоком не комфортно.

Способов сделать горизонтальный скролл довольно много и правильное решение всегда зависит от большого количества факторов. Для примера покажу два совершенно разных решения для этой проблемы:

Слева — официальный сайт Мегафона, справа — приложение Facebook

В первом случае показывается одна карточка и часть следующей. Для сигнализации о возможности скролла вправо или влево используются точки под карточками. Это решение рабочее, но подойдет оно далеко не всем. Например, если ваша карточка длинная и может не войти целиком в экран телефона, такое решение не подойдет.

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

Также не стоит забывать о контроле реализации. Плохая тормозная реализация способна нивелировать все ваши старания. В мобильных версиях сайтов скролл может работать заторможенно, в таким случае вероятный исход — закрытие вашего сайта. Обязательно проверяйте механику работы данного блока перед выходом в прод.

И еще одна маленькая полезность

Иногда бывает полезно последним элементом в скролле делать ссылку. Например, если выведено 10 самых популярных фильмов этой недели, то в конце списка можно поставить карточку со ссылкой на топ 50. Таким образом, если пользователя заинтересовал контент из скролла, но ему его показалось недостаточно, он сможет довольно просто продолжить смотреть более расширенную подборку на отдельной странице.

На этом все. Буду рада вашим комментариям и предложениям по интересующим темам для новых статей.

реализуем горизонтальную прокрутку секции на Flexbox

В этой статье мы рассмотрим решение повседневной задачи: как создать горизонтально прокручиваемую секцию сайта? Если вкратце, ответ — Flexbox.

Давайте разберёмся с этим более детально.

Каркас

Взгляните на эту разметку. Это простой блок section с несколькими вложенными div:

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

Стили

Плохой дизайн никто не любит, поэтому давайте сделаем страничку более опрятной:

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #8e44ad;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

Сперва мы явно задаём ширину и высоту корневых элементов равной 100%. Затем мы определяем цвет фона, убираем отступ у body и центрируем вложенный в него элемент.

Для наглядности применим стили к этому элементу <section>:

.card {
  background-color: #fff;
  min-width: 100%;
  min-height: 200px;
}

С первым свойством всё понятно, второе указывает секции всё время занимать 100% ширины родительского элемента, а третье гарантирует, что высота секции всегда будет не менее 200px. Вот, что получилось на данном этапе:

Поместим все блоки card--content в секцию card и снова займёмся стилями. Сперва сделаем card flex-контейнером:

.card {display: flex}

Затем займёмся .card--content:

.card--content {
  background-color: #e74c3c;
  min-width: 200px;
  margin: 5px;
}

Третья строка гарантирует, что ширина каждой карточки будет не меньше 200px, всё остальное просто и понятно. Вот результат:

Как вы могли заметить, прокручивается вся страница. Так происходит, потому что в секцию card помещаются не все элементы.

Исправим это так:

.card {
  overflow-x: auto;
}

И теперь прокручивается только секция:

Неплохо!

Прячем полосу прокрутки

Красоты ради можно спрятать полосу прокрутки. Для webkit-браузеров (Chrome и Safari) есть очень простой способ:

.card::-webkit-scrollbar {
  display: none;
}

Согласитесь, так страничка выглядит лучше.

Способы применения

В качестве примера мы использовали пустые блоки, но применить этот приём можно во многих приложениях. Вот пара примеров:

  1. Ваша собственная версия Instagram:

  2. Простая доска для заметок:

Перевод статьи «How to create horizontally scrollable sections with Flexbox»

Как это сделать хорошо

Когда вы думаете о «прокрутке» веб-сайтов и приложений, в первую очередь, вероятно, приходит на ум одно направление: вниз.

В этом есть смысл — практически каждая веб-страница структурирует свое содержимое по вертикали. Чтобы увидеть больше, просто прокрутите вниз с помощью мыши, трекпада или клавиатуры. Некоторые веб-сайты могут попытаться улучшить взаимодействие с пользователем с помощью анимированных всплывающих элементов или эффектов параллакса. Даже в этом случае ориентация прокрутки почти всегда остается вертикальной.

Вертикальная прокрутка работает нормально…но как насчет его аналога оси X, горизонтальной прокрутки ? Вы могли подумать о добавлении этой более редкой функции на свой сайт. Но является ли метод горизонтальной прокрутки интуитивно понятным или даже полезным? Это лучше вертикальной прокрутки? И как это может обогатить ваш UX?

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

Что такое горизонтальная прокрутка?

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

Другими словами, колесо прокрутки заставляет страницу перемещаться по экрану горизонтально, а не вертикально. Вот пример вертикальной прокрутки на сайте фотографа:

Источник изображения

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

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

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

Мнения о горизонтальной прокрутке искажаются как среди веб-дизайнеров, так и среди веб-пользователей. Даже я сам не слишком увлечен этим по нескольким причинам:

Это противоречит ожиданиям пользователей.

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

Это нормально — время от времени нарушать правила дизайна, чтобы добавить визуального чутья и изюминки. Но игнорирование этой конкретной конвенции без четкой цели смутит и расстроит посетителей больше, чем увлечет. И многие просто подумают, что ваша страница / элемент страницы сломан.

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

Имеет высокую стоимость взаимодействия.

С точки зрения UX, стоимость взаимодействия — это количество усилий, которые требуется пользователю для выполнения действия, такого как взаимодействие с элементом страницы.Стоимость взаимодействия состоит из (1) того, насколько усердно мы должны думать о задаче, и (2) физических усилий, необходимых для выполнения задачи.

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

Горизонтальная прокрутка, напротив, имеет гораздо более высокую стоимость взаимодействия.

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

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

Его легко упустить или проигнорировать.

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

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

Это создает проблемы для доступности.

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

Для людей с физическими ограничениями, умственными ограничениями или просто меньшим опытом работы с технологиями горизонтальная прокрутка часто является ненужным препятствием, которого можно избежать с помощью лучшего дизайна.

Когда работает горизонтальная прокрутка

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

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

Чтобы скрыть вторичное содержимое

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

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

Для отображения предложений по категориям

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

сайтов электронной торговли используют этот метод для разделения своего каталога на типы товаров. Стриминговые платформы делают то же самое со своими фильмами и сериалами. Посмотрите, как Netflix интегрирует горизонтальную прокрутку в свой пользовательский интерфейс:

Источник изображения

Также обратите внимание, что в этом примере предлагается альтернатива прокрутки — кнопки со стрелками.

Для навигации по большому изображению или визуальному элементу

Иногда один элемент может быть слишком большим для вашей страницы, и вы хотите уместить его в меньший элемент окна. Карты, изображения с большим количеством деталей и растянутые визуализации, такие как временные шкалы, — все это представляет собой проблему дизайна. Чтобы помочь пользователям ориентироваться и исследовать большую 2D-плоскость, рассмотрите возможность использования горизонтальной прокрутки.

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

Рекомендации по горизонтальной навигации

  1. Избегайте горизонтальной прокрутки на полных веб-страницах.
  2. Разрешить другие методы взаимодействия.
  3. Создавайте горизонтальные полосы прокрутки как вертикальные полосы прокрутки.
  4. Сделайте горизонтальную прокрутку визуально заметной.

Итак, вы думаете, что горизонтальная навигация имеет место на вашем сайте? Вот несколько рекомендаций, о которых следует помнить:

1. Избегайте горизонтальной прокрутки на полных веб-страницах.

Горизонтальная прокрутка никогда не должна заменять вертикальную прокрутку на всей веб-странице. Нарушение этого правила оттолкнет большинство пользователей.

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

Источник изображения

В этом примере пользователь выполняет прокрутку вниз.Поначалу появление СМИ справа неожиданно, но вы быстро улавливаете, что происходит.

2. Включите другие методы взаимодействия.

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

Источник изображения

Мобильные пользователи будут испытывать меньше проблем с боковым смахиванием, поэтому кнопки на мобильных сайтах не нужны. Тем не менее, основная ориентация прокрутки должна оставаться вертикальной на устройствах с сенсорным экраном.

3. Создайте горизонтальные полосы прокрутки как вертикальные полосы прокрутки.

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

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

4. Сделайте горизонтальную прокрутку визуально заметной.

Обязательно минимизируйте вероятность того, что посетители пропустят ваш контент, сигнализируя о возможности горизонтальной прокрутки.

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

Или попробуйте показать фрагмент скрытого содержимого в прокручиваемом контейнере.Сайты электронной коммерции, такие как Patagonia, делают это для списков продуктов — обратите внимание на миниатюры продуктов, торчащие с обеих сторон контейнера для дисплея:

Источник изображения

Наконец, можно использовать текст с инструкциями, например «Прокрутите, чтобы узнать больше». Попробуйте все эти реализации при создании прототипов и тестировании.

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

Когда элемент HTML — скажем,

— содержит контент, выходящий за его границы, это называется переполнением .Например, на стандартной веб-странице все содержимое ниже сгиба переполняется в окне браузера.

Чтобы включить горизонтальную прокрутку, мы можем использовать свойство CSS overflow-x .

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

Давайте разберем этот метод более подробно ниже.

Шаг 1. Используйте HTML для создания контейнера.

В этом примере я создал контейнерный элемент

шириной 500 пикселей. Внутри этого контейнера
находится дочерний элемент

с установленной шириной 1000 пикселей. Поскольку ширина

превышает ширину

, текст выходит за пределы правого края контейнера.

Вот HTML-код моего примера, как показано выше:

  
  
  
  
  
 
 
 
 (Ваш текст находится здесь.Кроме того, вы можете размещать другие элементы в этом родительском div.

Шаг 2: Используйте CSS, чтобы указать заданную ширину для контейнера и применить поведение прокрутки.

Настройка overflow-x: прокрутка до контейнера

отображает внутри него полосу прокрутки.

Вот соответствующий код CSS для моего примера:

  
 div {
 background-color: lightblue; 
 граница: сплошной черный 1 пиксель; 
 высота: 100 пикселей; 
 ширина: 500 пикселей; 
 переполнение-x: прокрутка; 
} 
 p {
 width: 1000 пикселей; 
 поле: 10 пикселей; 
}

Хотите дополнить причудливый элемент горизонтальной прокрутки? CSS Tricks, Codeburst и UX Collective — все они предлагают подробные руководства, на которые вы можете ссылаться для создания пользовательских контейнеров.

Как отключить горизонтальную прокрутку

Если вы не установите ширину дочернего элемента в его родительском

, содержимое дочернего элемента будет перенесено на следующую строку, избегая переполнения. Вы также можете установить для свойства CSS overflow-x значение hidden , что предотвращает перенос дочернего содержимого в его контейнер, но отключает боковую прокрутку.

  
 div {переполнение-x: скрыто; }

Другое решение — установить ширины дочерних элементов на 100% .Это указывает дочернему содержимому перейти к следующей строке, чтобы избежать обрезки краем контейнера, независимо от ширины контейнера.

  
 p {ширина: 100%; }

Боковая прокрутка

Для большинства из нас вертикальная прокрутка является рефлексом — просто она имеет больше смысла, чем ее горизонтальная альтернатива. Однако горизонтальной прокрутке все же есть место в современном веб-дизайне. При осторожном и преднамеренном внедрении этот метод может помочь структурировать ваши страницы и представить контент в удобной форме.

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

Примечание редактора: этот пост был первоначально опубликован в сентябре 2020 года и был обновлен для полноты.

Горизонтальная прокрутка

Эта страница содержит код для горизонтальной прокрутки.Это позволяет вам создать полосу прокрутки с горизонтальной прокруткой (но не с вертикальной прокруткой).

Если вам нужно создать полосу прокрутки с горизонтальной и вертикальной прокруткой, ознакомьтесь с этим HTML-кодом полосы прокрутки.

Базовая горизонтальная коробка прокрутки

Чтобы создать полосу прокрутки с горизонтальной прокруткой, необходимо использовать свойство overflow-x . В частности, вам нужно использовать этот код: overflow-x: scroll; . Это указывает вашему браузеру создавать полосы прокрутки на оси x (горизонтальной), когда содержимое контейнера слишком велико.Здесь мы делаем наш контент слишком широким, устанавливая его ширину на 250 процентов — это 250 процентов от его родительского контейнера (div).

Чтобы предотвратить появление вертикальных полос прокрутки, необходимо использовать overflow-y: hidden; (свойство overflow-y определяет вертикальное переполнение ).

Пример:

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

Веб-страница с горизонтальной прокруткой

Тот же принцип можно использовать для создания горизонтальной полосы прокрутки на всей веб-странице.Пока содержимое страницы шире, чем окно браузера пользователя, автоматически появляются горизонтальные полосы прокрутки. В следующем примере элемент body имеет ширину 120 процентов. Это приводит к тому, что страница становится на 20 процентов шире окна браузера.

Вот пример того, что я имею в виду.

HTML код:

Пример горизонтальной полосы прокрутки

Горизонтальная прокрутка

Используйте нижнюю полосу прокрутки для горизонтальной прокрутки… продолжай … Я не думал, что ты меня здесь вообще заметишь!

Вам не нужно делать всю страницу шире, чем сама страница (т.е. вам не нужно делать тег body 120%). Вы могли бы сказать, что один элемент div на странице установлен на 120%. Если он расположен правильно, это также приведет к появлению горизонтальной полосы прокрутки.

Горизонтальная прокрутка и взаимодействие с пользователем: передовой опыт

По состоянию на октябрь 2013 года насчитывалось около 767 миллионов веб-сайтов, составляющих 3,9 миллиарда веб-страниц. А реальность такова, что некоторые из них конкурируют с вашим сайтом — пытаются проникнуть на ваш рынок или увеличить свою долю … на том же рынке, на котором вы работаете. Они пытаются привлечь тех же пользователей, которых вы пытаетесь получить … или что еще хуже, они пытаются захватить часть вашего рынка или пользовательской базы.Конечно, точное количество зависит от отрасли, в которой вы работаете, от целевых пользователей, от того, нацеливаетесь ли вы на пользователей на региональной, национальной или международной основе, а также от других факторов.

Однако, исходя из семилетнего опыта работы в сфере SEO-консультирования, я могу засвидетельствовать, что каждый рынок является конкурентоспособным. Это правда, что некоторые рынки более конкурентоспособны и развиваются быстрее, чем другие. Однако общим является то, что на этой чрезвычайно конкурентной платформе, то есть в Интернете, вы хотите найти способ выделить себя и свой бизнес среди остальных.Вопрос в том, как?

Яркий, запоминающийся Веб-дизайн — один из лучших способов выделиться. Вам нужно что-то, что захватит ваших зрителей в эти первые несколько секунд, прежде чем им надоест, и щелкните мышью, чтобы посмотреть последнее видео с кошками.

Привлечение интереса с помощью горизонтальной прокрутки

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

С появлением таких устройств, как планшеты, смахивающее движение позволило вернуться к горизонтальной прокрутке. Может быть, из-за движения смахивания пользователи больше привыкли к горизонтальной навигации ? Хорошо продуманный горизонтальный веб-сайт может привлечь внимание людей, заставить их выглядеть дольше и запомнить ваш сайт.Так как же это сделать хорошо?

Возможно, один из самых известных примеров веб-сайта, который был переработан с горизонтальной прокруткой… MySpace

Спросите себя — уверен ли я, что мне нужна горизонтальная прокрутка?

Такое утверждение, как первый пункт статьи, предлагающей передовой опыт горизонтальной прокрутки, кажется немного контрпродуктивным, не так ли? Что ж, учитывая, что горизонтальная прокрутка, как я уже сказал, является предметом споров между дизайнерами и сторонниками пользовательского опыта, более чем разумно остановиться и подумать, является ли это единственным способом, которым вы можете воспользоваться, чтобы привлечь пользователей. внимание.В недавнем исследовании гуру пользовательского опыта Якоб Нильсен обнаружил, что только 1% пользователей просматривают информацию, которая изначально была скрыта из-за горизонтальной прокрутки. С другой стороны, горизонтальная прокрутка, сделанная правильно, может создать интересный пользовательский опыт. Например, есть несколько очень интересных реализаций горизонтальной прокрутки в сочетании с эффектом параллакса. В конце концов, цель этой статьи — как создать удобство для пользователей с помощью горизонтальной прокрутки.

Горизонтальная прокрутка сделана правильно — Художник С.Л. Холлоуэй использует горизонтальную прокрутку, чтобы имитировать прогулку по художественной галерее, где демонстрируются его творения.

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

По словам Дамиана Риса, существует 4 сценария, в которых горизонтальная прокрутка создает удобство для пользователя:

  • 1. Отображение нескольких изображений (например, для сайта фотографии или портфолио дизайнера)
  • 2. Отображение информации в большой визуальной области, которую сложно увидеть с первого взгляда (например,г. карта)
  • 3. Отображение отдельных разделов или слайдов информации о приложениях
  • 4. Отображение большого каталога продуктов или позиций для удобного отображения различных категорий продуктов
Reverse Buro — отличный пример веб-сайта-портфолио, в котором используется горизонтальная прокрутка.

Careful Planning

Любой веб-дизайнер знает, что это одно из первых знаний о дизайне. Однако через некоторое время мы можем немного полениться и просто решиться на это.С горизонтальным дизайном вы определенно захотите потратить время, чтобы спланировать его, нарисовать бумажные прототипы и макеты и выяснить, где и как все будет соответствовать. Есть много вещей, которые следует учитывать, и поскольку это не то, к чему большинство дизайнеров или посетителей или привыкли, вам нужно планировать гораздо больше, чем при использовании вертикального сайта.

Горизонтально

Навигация

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

Ваша навигационная система должна быть очевидной и привлекательной. Он должен выглядеть и вести себя так, как того ожидают пользователи. Люди не хотят, чтобы им приходилось нажимать и перемещать горизонтальную полосу прокрутки. Большинство из нас используют колесо мыши или клавиши со стрелками для прокрутки и почти забыли, что вы можете щелкнуть и переместить полосу прокрутки в первую очередь. Он стал скорее визуальным индикатором того, где вы находитесь на странице, чем инструментом для многих людей, особенно для молодого поколения, которое, вероятно, является тем, на кого вы в первую очередь пытаетесь ориентироваться с помощью горизонтального дизайна.Тем не менее, не удаляйте его. Когда доходит до этого, по крайней мере, люди знают, для чего это нужно.

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

Базовый

Навигация

По-прежнему важно, чтобы посетители могли получить доступ к вашей информации, поэтому не отказывайтесь от основ хорошей навигации .Убедитесь, что есть четко видимое и простое в использовании меню, которое приведет их к нужной информации, особенно к домашней странице. Таким образом, они могут какое-то время наслаждаться уникальностью вашего дизайна, но при этом получать важную информацию о вашем бизнесе и о том, что вы можете предложить.

Alex Fueras Photography — отличный пример простой базовой навигации с боковым меню
и меню в нижнем колонтитуле, которые обеспечивают легкий доступ ко всем страницам.

Используйте ярлыки

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

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

HereDesign использует простые стрелки, чтобы информировать пользователя о горизонтальной прокрутке сайта

Не пренебрегайте своим контентом

При создании горизонтального дизайна у вас может возникнуть соблазн позволить дизайну говорить сам за себя, тем более что горизонтальный дизайн обычно используется на модных сайтах с тяжелым изображением. Это вполне приемлемо, но помните, что у вашего веб-сайта должна быть цель, помимо «взглянуть на все эти крутые вещи» (если, конечно, ваш сайт не предназначен буквально для того, чтобы люди могли смотреть на интересные вещи).Убедитесь, что есть информация о компании, товарах или услугах, контактная информация, информация для заказа и т. Д.

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

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

Кодирование

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

Есть несколько различных методов, которые можно использовать для достижения этого эффекта. Вот отличный учебник, который фактически разберет основные элементы HTML и CSS для создания классного и функционального горизонтального веб-сайта.Однако это только один способ сделать это. Есть и другие способы создания эффекта.

Последнее слово предостережения (да, еще одно!)

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

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

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

Хотите узнать больше?

Если вас интересует пересечение UX и дизайна пользовательского интерфейса, подумайте о том, чтобы пройти онлайн-курс «Шаблоны дизайна пользовательского интерфейса для успешного программного обеспечения» или «Дизайн-мышление: руководство для начинающих».Если, с другой стороны, вы хотите освежить в памяти основы UX и юзабилити, вы можете пройти онлайн-курс по пользовательскому опыту (или другой теме дизайна). Удачи в вашем познавательном путешествии!

(Изображение: Depositphotos)

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

Вы когда-нибудь думали, что веб-сайты с горизонтальной прокруткой будут иметь место?

С каждым годом создается все больше и больше сайтов. Каждый борется за внимание зрителей.

Что отличает веб-сайт от других и привлекает больше посетителей? Все сводится к веб-дизайну.

Дизайн веб-сайта определяет, останется ли посетитель или уйдет.

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

Горизонтальная прокрутка интересна и может подарить пользователю незабываемые впечатления. Но не для каждого сайта это практично.

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

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

Горизонтальный макет может помочь представить содержимое изображения лучше, чем вертикальный макет. Это также улучшает взаимодействие с пользователем.

Следующие типы веб-сайтов хорошо смотрятся с горизонтальной прокруткой:

  • Веб-сайты портфолио
  • Веб-сайты каталогов
  • Интернет-галереи
  • Отображение проектов
  • Отображение интерактивных карт
  • Обеспечивает оптимальное использование пространства экрана с широкоформатными мониторами, распространенными сегодня.
  • Обеспечивает уникальный и увлекательный способ взаимодействия пользователей с веб-сайтом.
  • Обеспечивает более удобный процесс повествования.
  • Хорошо работает с крупной типографикой.

Использование передовых методов дизайна может сделать веб-сайт с горизонтальной прокруткой лучше всего.Это также помогает создать отличный пользовательский опыт.

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

Помните об этих моментах при проектировании горизонтального участка:

  • Держите веб-сайт организованным и простым
  • Предоставьте основную информацию. Например, предоставляемые услуги или продукты и контактная информация.
  • Убедитесь, что есть наглядное и понятное меню.
  • Многие пользователи не привыкли к прокрутке в сторону.

Добавьте индикаторы, сообщающие пользователям, что страница прокручивается в сторону. Индикаторы включают стрелки или показывают часть изображения, так что посетителю нужно прокрутить, чтобы увидеть остальные

  • Используйте эффекты параллакса, которые делают работу более удобной.
  • Пользователи не хотят использовать горизонтальную полосу прокрутки. Большинство людей используют колесо мыши или клавиши со стрелками.

Для максимального удобства пользователей горизонтальные веб-сайты должны задействовать эти механизмы

Удивительные примеры горизонтальных веб-сайтов

Home Société

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

Это хороший пример сочетания изображений и письменного контента на горизонтальном веб-сайте.

Портфолио Евгении Дюранте

На этом веб-сайте Евгении представлены письменные услуги, которые она предоставляет. Горизонтальная прокрутка хорошо подходит для большой типографики.

Создавайте визуально привлекательные и высокопроизводительные веб-сайты без написания кода

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

Балерина

Ballerina использует эффекты параллакса и анимацию для создания запоминающегося веб-сайта. Горизонтальная прокрутка способствует незабываемому дизайну.

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

Эльфлеттериг

Elfletterig использует преимущества горизонтальной прокрутки для отображения множества изображений своих проектов.Эти изображения намного лучше подходят для горизонтального веб-сайта, чем для вертикального.

Alex Flueras Фотография

На этом веб-сайте портфолио используется горизонтальный макет для отображения большого количества визуального контента. Меню помогает пользователям легко ориентироваться в нем.

Пользователи могут использовать горизонтальную полосу прокрутки или клавиши со стрелками на клавиатуре для прокрутки.

Шесть носков Студия

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

Великие армяне

Великие армяне — это галерея ста армян, изменивших мир.

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

Группа Немезиды

Веб-сайт Nemesis — отличный пример организованного и чистого горизонтального веб-сайта.Он использует крупную типографику и пробелы таким образом, чтобы это было приятно для глаз.

Еще одна особенность, достойная подражания, — это меню, которое всегда отображается вверху страницы.

Студия Д. Потфера

В этом сайте-портфолио используется горизонтальный дизайн для отображения яркого графического содержания.

Deepondé

Этот сайт приветствует посетителей видео. Используя колесо мыши, посетители могут прокручивать товары на сайте.

Zand.tech

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

Другая — стрелка, которая сообщает пользователям, что нужно прокручивать влево. На сайте также есть постоянное меню вверху страницы.

Джейсон Лав

Джейсон Лав отображает интерактивный контент, который хорошо работает с горизонтальной прокруткой. Посетители могут прокручивать влево и вправо, и это включает в себя развлекательные и уникальные элементы.

Виртуальная выставка SSDC2020

Этот веб-сайт с горизонтальной прокруткой содержит много видеоконтента, который хорошо выглядит в горизонтальном формате. Дизайн привлекательный и чистый, с использованием сплошного цвета фона с белым акцентом.

Меценат Студия

Maecenas Studio сочетает в себе вертикальную и горизонтальную прокрутку. Он представляет свои проекты так, как будто посетитель перелистывает страницы книги.

Bbb.cat

Художники приветствовали открытие студии созданием плакатов.Пользователи могут просматривать плакаты на этой веб-странице.

Вообан

На каждой странице Vooban.com есть ползунки с горизонтальной прокруткой. Добавление скользящих элементов — отличный способ включить больше контента, не перегружая пространство.

Квок Инь Мак

Квок Инь Мак рассказывает историю своей работы в области графического дизайна. Сайт организован, но содержит много информации.

Принципы типографики

Этот веб-сайт посвящен типографике и подчеркивает принципы шрифтов с примерами.

Газнор

Gasnor использует горизонтальный ползунок на своем вертикальном сайте для отображения данных. Этот ползунок помогает передать идею движения вперед во времени и увеличивает вес сообщения.

Museo de la desinformación

На этом сайте представлена ​​уникальная идея дизайна хлебного меню на горизонтальных веб-страницах. Это линия из точек, представляющая каждый раздел веб-страницы.

Точки превращаются в галочки после того, как пользователь заходит в этот раздел.

Peak’n Film

Peak’n Film — классический пример использования горизонтального веб-сайта. Макет позволяет посетителям сосредоточить все свое внимание на потрясающих изображениях.

Belward Tree Films

Belward Tree Films наилучшим образом использует экранную площадь для отображения своих фотографий и видео.

Участок Стаса Яручина

Сайт Стаса Яручина с горизонтальной прокруткой знакомит с художником и предоставляет информацию о его предстоящих мероприятиях.На главной странице посетители могут послушать отрывок из его музыки и пролистать его фотографии.

Buildinamsterdam

Этот веб-сайт с горизонтальной прокруткой отличается яркими цветами изображений, эффектами параллакса и стрелкой навигации.

Spiritus

Spiritus сохраняет чистый и простой вид, который привлекает посетителей. Он имеет постоянное навигационное меню и включает интерактивные элементы.

Цифровая выставка талантов из пеноматериала

На этом веб-сайте с горизонтальной прокруткой представлены фотовыставки девятнадцати разных художников.

Битва

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

Кристи Тан

Веб-страница портфолио Кристи Танг позволяет пользователям быстро просматривать ее последние проекты. После седьмого проекта прокрутка переключается с горизонтальной на вертикальную.

Мы стреляем по бутылкам

Эта британская группа компаний специализируется на фотографировании бутылок.Эта короткая веб-страница демонстрирует их работы.

Studio — BA®

Studio-Ba включает в себя множество параллаксных, интерактивных и анимированных эффектов, чтобы удивить своих гостей.

Завершение мыслей об этих примерах веб-сайтов с горизонтальной прокруткой

При хорошем дизайне горизонтальная прокрутка может сделать веб-сайт интересным. Это также создаст хороший пользовательский опыт.

Это практичный дизайн для изображений и видеоконтента, поскольку он оптимально использует пространство экрана.Кроме того, это обеспечивает определенный поток истории.

Хотя это не для каждой веб-страницы, горизонтальная прокрутка может быть полезной. В некоторых случаях это самый идеальный вариант оформления.

Почему бы не проверить свои творческие способности и не попробовать веб-сайт с горизонтальной прокруткой?

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

Мы также писали на похожие темы, такие как дизайн одностраничного веб-сайта, современный дизайн веб-сайта, дизайн страниц, которые скоро появятся, анимация веб-сайта и цветовые схемы веб-сайта.

И это еще не все.

Нам очень нравится дизайн, поэтому мы также создали статьи о параллаксной прокрутке, минималистичных веб-сайтах, нижнем и верхнем колонтитулах веб-сайтов, о дизайне страниц для связи и креативных примерах веб-сайтов.

overflow — HTML-таблица с горизонтальной прокруткой (первый столбец исправлен)

overflow — HTML-таблица с горизонтальной прокруткой (первый столбец исправлен) — qaru

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено 209к раз

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

C R

1,93255 золотых знаков3131 серебряный знак3939 бронзовых знаков

Создан 04 авг.

АланАлан

1,9779 золотых знаков2323 серебряных знака2828 бронзовых знаков

2

У меня есть похожая таблица в таком стиле:

  <таблица>
    
         Привет, мир! 
        
            

                
 Мое предварительно отформатированное содержимое

alexxlab

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

Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы

Как успокоить плачущего ребенка: 10 эффективных способов

Что нужно новорожденному на первое время: полный список необходимых вещей

Пеленки для новорожденных: виды, размеры и способы использования

Детская кроватка для новорожденного: как правильно выбрать

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *