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

Горизонтальный скролл. Когда и где использовать | 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. Таким образом, если пользователя заинтересовал контент из скролла, но ему его показалось недостаточно, он сможет довольно просто продолжить смотреть более расширенную подборку на отдельной странице.

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

Горизонтальная прокрутка CSS: определение, и как убрать на всех разрешения

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

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

В общем, сегодня мы обсудим:

•  что такое горизонтальный скролл;

•  когда его можно использовать;

•  когда его лучше устранять;

•  как убрать горизонтальный скролл возможностями CSS.

Горизонтальный скролл CSS

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

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

Горизонтальный скролл CSS: особенности

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

Особенности горизонтального скролла:

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

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

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

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

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

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

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

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

Как убрать горизонтальный скролл с помощью CSS

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

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

Как убрать горизонтальный скролл в html, используя CSS-свойство «overflow»

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

Код будет таким:

html {

overflow: hidden;

}

 

и/или

 

body {

overflow: hidden;

}

 

Нужно отметить, что свойство «overflow» — это общее свойство. Оно включает в себя:

•  overflow-х — свойство, отвечающее за горизонтальную прокрутку;

•  overflow-у — свойство, отвечающее за вертикальную прокрутку.

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

Заключение

Сегодня вы узнали, что такое горизонтальная прокрутка и как ее можно специально использовать. Если же она возникла случайно, тогда есть проверенный способ, как убрать горизонтальный скролл возможностями CSS — использовать свойство «overflow».

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

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

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

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

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

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

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

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

(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/)

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

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

Переводчик: Аня, тестировщик
сервиса для дизайнеров (БЕЗ горизонтального скролла) Ahoba (;

Автор: 407th

Источник

Горизонтальный скролл что это

Горизонтальный скролл: что с ним не так?

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

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

Этот паттерн доступен, адаптивен и согласован для всех размеров экрана. И его довольно легко реализовать.

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

В этой статье я объясню их и посоветую, чем его заменить.

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

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

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

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

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

Чем заменить этот паттерн

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

Загрузка меньшего количества элементов и ссылка на страницу каждой категории

Таким образом, контент не скрывается. Легко перейти к категории; данные не тратятся зря; и вы избегаете нетрадиционных, трудоемких паттернов.

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

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

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

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

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

«Но это потребует больше кликов»

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

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

Вывод

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

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

Горизонтальная прокрутка CSS: определение и как убрать на всех разрешения

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

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

Горизонтальный скролл CSS: особенности

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

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

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

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

Как убрать горизонтальный скролл с помощью CSS

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

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

Как убрать горизонтальный скролл в html, используя CSS-свойство «overflow»

• overflow-х — свойство, отвечающее за горизонтальную прокрутку;

• overflow-у — свойство, отвечающее за вертикальную прокрутку.

Заключение

Сегодня вы узнали, что такое горизонтальная прокрутка и как ее можно специально использовать. Если же она возникла случайно, тогда есть проверенный способ, как убрать горизонтальный скролл возможностями CSS — использовать свойство «overflow».

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

Мы будем очень благодарны

если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.

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

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

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

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

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

Рассмотрим риски, на которые стоит обратить внимание

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

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

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

Рекомендации

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

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

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

Механика работы

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

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

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

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

Скролл в мобильной версии

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

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

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

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

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

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

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

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

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

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

Как управлять вниманием читателя с помощью скролла — Дизайн на vc.ru

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

7560 просмотров

Что надо знать о человеческом мозге

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

Исключение — когда информация привлекает внимание мозга. Есть два основных способа это сделать, согласно книге Дэвида Рока «Мозг. Инструкция по применению»:

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

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

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

Рассмотрим их на примерах.

Не обмануть ожидания

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

Пример. Если статья называется «5 способов сделать яичницу», она не должна рассказывать о том, откуда берутся куриные яйца. Так делают авторы SEO-статей, чтобы впихнуть больше ключевых слов и нагнать трафик. Если обещаете развлекательные материалы — пусть будет настоящее развлекалово, если простую для понимания обучающую информацию — на лендинге должна быть именно она.

Создать иллюзию, что пользователь управляет процессом

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

Пример. Мы делали проект к юбилею завода «КуйбышевАзот» в Тольятти. На странице юбилея завода по скроллу на картинках появляется текст, работает анимация, бегут цифры.

По скроллу карта превращается в инфографику

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

Когда нужно показать несколько фото, вертикальный скролл меняется на горизонтальный — пользователь может посмотреть всю галерею

Менять ритмику повествования

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

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

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

Крупная типографика и разные иллюстрации не дают мозгу заскучать

Ломать шаблон взаимодействия

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

Пример. На странице о локомотивах «ЛокоТеха» интерактивные подписи к объектам появляются, если навести курсор на знак вопроса, описания разных локомотивов отображаются, если нажать на стрелки, а собственный локомотив соберется — если подергать ползунки конструктора.

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

Еще одна механика — листалка. Если нажать на стрелку, появится информация о новом виде локомотива и он сам приедет в центр экрана

Завлечь микроанимацией

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

Пример. Такой прием использовали создатели страницы с биографией Музея Сахарова.

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

Не переборщить с механиками взаимодействия

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

По нашему опыту, на один лендинг в 20-30 экранов достаточно 3-4 механик. Если объем меньше, хватит и 2-3. При этом использовать их стоит умеренно, иначе даже одна очень активная механика может загубить все повествование.

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

Лендинг с дайджестом должен рассказывать о новостях, но вместо них видно только анимацию

Главное: как управлять вниманием на лендинге

1. Не обманывать ожиданий — дать читателю то, что объявили в заголовке.
2. Создать иллюзию управления процессом за счет изменений по скроллу.
3. Иногда нарушать ритмику повествования.
4. Ломать шаблон взаимодействия — давать новую информацию не только по скроллу, но и по клику или наведению курсора.
5. Завлечь микроанимацией, тогда с лендингом захочется взаимодействовать.
6. Не переборщить с механиками, 3-4 будет достаточно.

Читайте другие наши статьи о приемах работы с информационными продуктами

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

Перемещение или прокрутка по всему тексту

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

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

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

Прокрутка	Необходимые действия
В начало и конец диапазонов	Нажимайте клавиши CTRL+клавиша со стрелкой для прокрутки до начала и конца каждого диапазона в столбце или строке перед остановкой в конце. Чтобы перейти к началу и концу каждого диапазона, прежде чем останавливаться на конце, нажмите клавиши CTRL+SHIFT+клавиша со стрелкой.
На одну строку вверх или вниз	Нажмите клавишу SCROLL LOCK, а затем используйте клавиши СТРЕЛКА ВВЕРХ и СТРЕЛКА ВНИЗ для прокрутки на одну строку вверх или вниз.
Один столбец влево или вправо	Нажмите клавишу SCROLL LOCK, а затем используйте клавиши СТРЕЛКА ВЛЕВО и СТРЕЛКА ВПРАВО для прокрутки одного столбца влево или вправо.
На одно окно вверх или вниз	Нажмите page UP или PAGE DOWN.
Одно окно влево или вправо	Нажмите клавишу SCROLL LOCK, а затем, удерживая нажатой клавишу CTRL, нажмите клавишу СТРЕЛКА ВЛЕВО или СТРЕЛКА ВПРАВО.
Большое расстояние	Нажмите клавишу SCROLL LOCK, а затем, удерживая нажатой клавишу CTRL и клавишу со стрелкой, можно быстро перемещаться между большими областями.

Примечание: Когда scroll LOCK в положении SCROLL LOCK, scroll LOCK отображается в панели состояния в Excel. При нажатии клавиш со стрелками при нажатии клавиши SCROLL LOCK будет прокручиваться на одну строку вверх или вниз либо на один столбец влево или вправо. Для перемещения между ячейками с помощью клавиш со стрелками необходимо отключить scroll LOCK. Для этого нажмите клавишу SCROLL LOCK (ScrLk) на клавиатуре. Если клавиатура не содержит эту клавишу, вы можете отключить режим SCROLL LOCK с помощью экранной клавиатуры. Чтобы открыть экранную клавиатуру, нажмите кнопку Начните на рабочем Windows и введите Экранная клавиатура. Чтобы отключить режим SCROLL LOCK, нажмите клавишу ScrLk и закроете экранную клавиатуру.

Если полосы прокрутки не отображаются, для их отображения выполните следующее:

1. Выберите Файл > Параметры.

   В Excel 2007 нажмите кнопку Microsoft Office и выберите Excel параметры.

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

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

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

Примечания: 

• org/ListItem»>

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

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

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

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

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

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

Задача	Необходимые действия
Прокрутка вверх или вниз по нескольким строкам за один раз	Поверните колесико вперед или назад.
Прокрутка влево или вправо Windows	Нажмите и удерживайте нажатой CTRL+SHIFT и поверните колесико вперед или назад.
Прокрутка с увеличенной скоростью прокрутки	Чтобы увеличить скорость прокрутки во время прокрутки, удерживайте указатель мыши в самом далеком конце экрана более 10 секунд. Перемещение мыши в обратном направлении замедляет скорость прокрутки.
Панорамирование на разных таблицах	Удерживая нажатой кнопку колесия, перетащите указатель от знака в нужном направлении. Чтобы ускорить прокрутку, переместили указатель от знака начала. Чтобы замедлить прокрутку, переместить указатель ближе к знаку начала.
Автоматическое протаскирование на разных концах таблицы	Нажмите кнопку колесико, а затем переместите указатель мыши в нужном направлении. Чтобы ускорить прокрутку, переместили указатель от знака начала. Чтобы замедлить прокрутку, переместить указатель ближе к знаку начала. Чтобы остановить автоматическую прокрутку, нажмите любую кнопку мыши.
Увеличение и уменьшение масштаба	Удерживая на удержании CTRL, поворачивать IntelliMouse колесико вперед или назад. Процент увеличенного изображения отображается в панели состояния.
Показывать подробности в структуре	Навести указатель на ячейку, которая суммирует данные в структуре, а затем, удерживая на удержание shift, поворачивать колесико вперед.
Скрытие подробностей в структуре	Наводя указатель на любую ячейку с подробными данными, поворачивать колесико назад, удерживая на этом месте shift.

Дополнительные сведения

Вы всегда можете задать вопрос специалисту Excel Tech Community или попросить помощи в сообществе Answers community.

К началу страницы

html — Горизонтальная прокрутка css?

Спросил 8 лет, 11 месяцев назад

Изменено 6 лет, 11 месяцев назад

Просмотрено 158k раз

Я хочу иметь один

Спасибо http://jsfiddle.net/clairesuzy/FPBWr/

Проблема с этими 530px. Вместо этого я хотел бы использовать 100%. Но затем я получил прокрутку страницы, и прокрутка DIV идет правильно, не могу понять, есть идеи?

Вот статья на сербском о решении http://www.blog.play2web.com/index.php?id=18

• html
• css
• overflow

Просто установите для ширины значение auto:

 #myWorkContent{
    ширина: авто;
    высота: 210 пикселей;
    граница: 13px сплошная #bed5cd;
    переполнение-x: прокрутка;
    переполнение-y: скрыто;
    пробел: nowrap;
}
 

Таким образом, ваш div может быть как можно шире, чтобы вы могли добавить как можно больше изображений котят ;3

Ширина вашего div будет увеличиваться в зависимости от содержащихся в нем дочерних элементов.

jsFiddle

2

Ниже у меня сработало.

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

Родительский CSS:

 .divParentClass {
    ширина: 200 пикселей;
    высота: 100 пикселей;
    переполнение: прокрутка;
    пробел: nowrap;
}
 

Дети CSS:

 .divChildClass {
    ширина: 110 пикселей;
    высота: 200 пикселей;
    отображение: встроенный блок;
}
 

Для горизонтальной прокрутки:

 overflow-x: scroll;
переполнение-y: скрыто;
 

Для вертикальной прокрутки:

 overflow-x: скрыто;
переполнение-у: прокрутка;
 

Просто убедитесь, что вы добавили box-sizing:border-box; к твоему #myWorkContent .

http://jsfiddle.net/FPBWr/160/

1

использовать max-width вместо width

max-width:530px;

демо: http://jsfiddle.net/FPBWr/161/

Я понял так:

 * { padding: 0; поле: 0 }
тело { высота: 100%; пробел: nowrap }
HTML {высота: 100%}
.red {фон: красный}
.синий {фон: синий}
. желтый {фон: желтый}
.header {ширина: 100%; высота: 10%; положение: фиксированное }
.обертка {ширина: 1000%; высота: 100%; фон: зеленый }
.страница {ширина: 10%; высота: 100%; плыть налево }
<дел>
<дел>
    <дел>
    <дел>
    <дел>
    <дел>
    <дел>
    <дел>
    <дел>
    <дел>
    <дел>
    <дел>