Меню Закрыть

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

Содержание

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

1 ответ 1

Спасибо за написание функции «horizontalClick» alex Roosso https://ru.stackoverflow.com/users/331743/alex-roosso

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

1) Прокрутка контента колёсиком мыши, когда курсор мыши находить в области блока с контентом.

2) Прокрутка контента кнопками (желтые кнопки слева и справа).

3) Прокрутка контента с помощью технологии Свайп на сенсорных устройствах.

4) Прокрутка контента с помощью стрелок клавиатуры (стрелки: влево/вправо).

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

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


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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

Читайте также:  Установка wine linux mint 19 cinnamon

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

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


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

Читайте также:  Монитор с прицелом для игр

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

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

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

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

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

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

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

Начало и конец диапазонов

Нажмите клавиши CTRL + стрелка для прокрутки до начала и конца диапазона в столбце или строке перед остановкой в конце листа.

Для прокрутки в начало и конец каждого диапазона при выделении диапазонов перед остановкой в конце листа нажмите клавиши CTRL + SHIFT + клавиша со стрелкой.

На одну строку вверх или вниз

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

На один столбец влево или вправо

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

На один окно вверх или вниз

Нажимайте клавишу PAGE UP или PAGE вниз.

Влево или вправо на один окно

Нажмите кнопку SCROLL LOCK, а затем, удерживая нажатой клавишу CTRL, нажимайте клавишу Стрелка влево или стрелка вправо.

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

Примечание: При включенном режиме SCROLL LOCK в строке состояния в Excel отображается замок с прокруткой. При нажатии клавиши со стрелкой прокрутка будет прокручиваться на одну строку вверх или вниз либо на одну колонку влево или вправо. Чтобы перемещаться между ячейками с помощью клавиш со стрелками, необходимо отключить функцию SCROLL LOCK. Для этого нажмите клавишу Scroll Lock (с меткой ScrLk) на клавиатуре. Если клавиатура не содержит этот ключ, вы можете отключить режим SCROLL LOCK с помощью экранной клавиатуры. Чтобы открыть экранную клавиатуру, нажмите кнопку Пуск на рабочем столе Windows и введите экранную клавиатуру. Чтобы отключить БЛОКИРОВКУ прокрутки, нажмите клавишу ScrLk , а затем закройте экранную клавиатуру.

Перемещение по листу с помощью полос прокрутки

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

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

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

Читайте также:  Как подключить роутер д линк дир 300

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

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

На одну строку вверх или вниз

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

На один столбец влево или вправо

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

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

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

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

На один окно вверх или вниз

Щелкните вертикальную полосу прокрутки выше или ниже бегунка .

Влево или вправо на один окно

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

При перетаскивании бегунка прокрутки удерживайте нажатой клавишу SHIFT. .

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

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

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

Прокрутка и масштабирование с помощью мыши

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

Прокрутка вверх или вниз нескольких строк за один раз

Поворот колесика вперед или назад.

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

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

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

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

Автоматическая панорама на листе

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

Увеличение и уменьшение масштаба

Удерживая нажатой клавишу CTRL, поверните колесиком IntelliMouse вперед или назад. Процент увеличенного листа отображается в строке состояния.

Отображение подробных данных в структурах

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

Скрытие подробных данных в структурах

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

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

Вы всегда можете задать вопрос специалисту Excel Tech Community, попросить помощи в сообществе Answers community, а также предложить новую функцию или улучшение на веб-сайте Excel User Voice.

Рекомендуем к прочтению

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

Ваш адрес email не будет опубликован.