нужна ли сайту бесконечная прокрутка? — CMS Magazine
Сайт с бесконечной прокруткой, позволяет скролить страницу, пока есть не просмотренная информация. Т.е. это бесконечное число страниц, но для их загрузки не надо нажимать на ссылку «следующая страница», она загружается автоматически.
Facebook и другие социальные сети, такие как «Вконтакте», «Twitter», «Instagramm», лучшие примеры сайтов с бесконечной прокруткой. Такой тип прокрутки можно встретить на новостных агрегаторах, фотостоках, новостных сайтах.
Но бесконечная прокрутка подойдет не каждому сайту. Применять ее или нет, зависит от ваших целей и от того, какой тип информации вы предлагаете пользователю.
Плюсы
Это здорово для мобильных телефонов. Нажимать на маленькую кнопку «следующая страница» даже на экране внушительного смартфона не всегда удобно. А при простой прокрутке вверх-вниз изучать контент гораздо легче.
Это помогает удержать читателей. Читатели увлекаются, сами не замечая этого, и проводят на сайте больше времени.
Это работает для большого количества информации. Если вы добавляете на сайт много контента, то бесконечная прокрутка поможет показать больше информации «за раз».
Информация в режиме реального времени. Если вы на сайте добавляете информацию в режиме реального времени (как, например, в социальных сетях), то бесконечная прокрутка вам подойдет. Информация будет мгновенно обновляться, и пользователь сможет перейти к ней немедленно.
Стоит также отметить, что сайт с бесконечной прокруткой не станет медленнее, чем сайт отформатированный стандартно.
Минусы
Сложно найти нужную информацию. Для того чтобы найти что-то конкретное или заинтересовавшее рано, страницу опять нужно прокручивать. А из-за того, что она постоянно обновляется, нужная информация отодвигается все дальше и дальше, и нет возможности запомнить на какой она странице.
Чтобы попасть на страницы со старой информацией посетитель сайта все равно вынужден пролистать и всю новую информацию. Это занимает время и зачастую раздражает.Придется отказаться от футера. При бесконечной прокрутке, пользователь не сможет видеть футер. А на футере, как правило, размещаются ссылки на важные страницы сайта (такие как «Карта сайта», «Контакты», «О нас» и др.). Поэтому ссылки на эти разделы должны быть в верхнем меню или хедере, что не всегда выглядит уместно.
При бесконечной прокрутке используется JavaScript. Это не большая проблема. Но если вы пытаетесь избежать использования JavaScript, или беспокоитесь о своем рейтинге в Google, то лучше отказаться от такого вида прокрутки.
Так же стоит напомнить о SEO-продвижении в условиях бесконечной прокрутки. Оно не становиться сложнее, просто требует дополнительной работы. Надо держать в уме, что сделать сайт с бесконечной прокруткой привлекательным для поисковых ботов можно путем создания статических URL-адресов для каждой страницы.
Как понять подойдет ли сайту бесконечная прокрутка
Применять или не применять бесконечную прокрутку зависит в основном от целей вашего сайта. Для одного бизнеса это хорошая идея, для другого просто кошмар. Вот некоторые типичные «победители» и «проигравшие» от установки бесконечной прокрутки.
Победители: развлекательные веб-сайты. Если ваши данные по существу имеют один уровень
важности, вы хотите развлечь пользователя и удержать на вашем сайте подольше, то бесконечная прокрутка поможет добиться этих целей.
Проигравшие: сайты, продающие через интернет. Интернет-магазины не смогут быть успешными с бесконечной прокруткой. Тут не вся информация интересует пользователя одинаково и очень важен поиск.
Не обязательно ваш сайт попадет в одну из этих категорий. Он может быть смешанным, или добиваться других целей. К сожалению, нет точного ответа, когда прокрутка убьет ваш сайт, а когда поможет стать успешным.
Поэтому все зависит от вас, но при выборе учитывайте все плюсы и минусы бесконечной прокрутки.
Хотите получить профессиональную консультацию по этому вопросу — обращайтесь в «АртисМедиа».
Как должна работать прокрутка? Часть четвёртая
Илья Бирман |
||||||||
|
Мы выяснили, что прокрутка из интерфейсного элемента выросла до важнейшего способа взаимодействия. Дизайнеры постоянно думали над тем, как её сделать проще и естественней. Интерфейс развивался, пока почти не исчез в Айфоне, превратившись в непосредственное взаимодействие с прокручиваемым содержимым. И тогда дизайнеры стали думать в обратную сторону: как ещё использовать этот новый приятный жест. В первом Айфоне уже была реализована идея скрытия элементов интерфейса при прокрутке: Если в этом месте провести пальцем вверх, то вверх сдвинется не только страница, но за пределы экрана уедет и вся шапка окна. |
|
|||||||
Сегодня такое поведение привычно, но для того временем это было изобретением. Обычным решением было бы добавление кнопки «Развернуть на весь экран».|
В приложении «Твити» Лорен Брихтер придумал «оттяг» — жест, когда пользователь прокручивает ленту вниз дальше, чем в ней хватает содержимого, и тем самым инициирует его обновление: Жест оказался настолько удачным, что через пару лет Эпл сделал его стандартным для любых обновляемых списков в Ай-ОСе. Правда, реализация Эпла никогда не была настолько же опрятной, как у Лорена. |
Pull-to-refresh |
|
Содержимое может подгружаться по мере прокрутки. |
Картинка ждёт читателя 7 reasons why Infinite Scrolling is probably a bad idea. Статью следует читать как список признаков плохой реализации, а не самой идеи |
Однако хорошая реализация такой «бесконечной прокрутки» требует большого внимания. Во-первых, важно, чтобы размер лифта не прыгал, иначе он перестаёт быть индикатором размера содержимого. Если же содержимое безразмерно, и просмотр его целиком не имеет никакого смысла, полосы прокрутки лучше вообще скрыть. Во-вторых, новое содержимое надо подгружать не тогда, когда пользователь уже «упёрся» в нижнюю часть страницы, а несколько раньше, чтобы при нормальной скорости чтения содержимое «ждало читателя».|
Через разную скорость прокрутки разных элементов передают разное удаление элементов интерфейса от пользователя, добавляя ощущение объёма. В начале книги Артёма Горбунова «Типографика и вёрстка» на прокрутку завязана трёхмерная анимация её открытия: Подобные эффекты используются не только с художественной целью: при прокрутке отдельные элементы интерфейса «закрепляют» на экране, если им полезно оставаться в поле зрения, видоизменяют в зависимости от положения основного содержимого. На сайте правил русского языка впервые было реализовано «скукоживание» шапки: при прокрутке шапка подвисает на экране, но при этом сильно уменьшается в размере, оставляя максимум места содержимому: |
Параллакс — изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя. |
|
Самое важное при такой нестандартной прокрутке — постоянная обратная связь. Как я уже писал в предыдущих частях, с мгновенной и непрерывной обратной связью связан весь кайф жеста прокрутки. Поэтому не должно возникать ситуации, когда в ответ на прокрутку ничего не происходит. Cтрашным преступлением является перехват жеста прокрутки и замена реакции на дискретное листание при преодолении пороговых значений. |
Об обратной связи |
Работает это так: человек пытается прокручивать страницу, но ничего не происходит. Но после прохождения определённой точки содержимое вдруг с собственной скоростью прокручивается ровно на один экран.|
Однако это не значит, что прокрутка всегда лучше листания. Часто имеет смысл отдавать содержимое дискретными порциями. Состояние экрана между фотографиями не имеет смысла: Да и вручную «подгонять» фотографию так, чтобы она занимала ровно весь экран, было бы неудобно. Поэтому фотографии в Айфоне листаются. |
О листании |
|
Страницы домашнего экрана тоже листаются — благодаря такой дискретности человек запоминает расположение иконок на конкретном экране, что помогает вырабатыванию привычки. В Айфоне листание реализовано как частный случай прокрутки. Когда вы листаете фотографии или страницы домашнего экрана, происходит то же, что при прокрутке — но с одним исключением: после отпускания пальца, содержимое «примагничивается» к дискретной позиции. Поскольку пользователь ожидает, что достаточно быстрое движение и отпускание пальца сработает как прокрутка ровно на один экран, жест получается другим, чем если бы он стремился прокрутить ровно на один экран вручную. Такой жест называют «смахиванием». Важно, что при смахивании, в отличие от описанного выше листания с пороговыми переходами, обратная связь ни в какой момент не исчезает: пока я двигаю фотографию пальцем, она непрерывно следует за ним. В последние время распространилось ещё одно использование смахивания. Когда фотография открыта на весь экран, чтобы её закрыть, достаточно смахнуть её с экрана в любую сторону. Этот жест выполнить легче, чем простое прикосновение к любой части экрана. В завершение совета о прокрутке упомяну ещё и часы Эпл-вотч. В них для прокрутки кроме движения пальцем по экрану можно использовать коронку, и это часто оказывается удобнее: во-первых, не загораживаешь сам себе пальцем маленький экран, а во-вторых физически ощущаешь движение: |
О привычках |
Причина в том, что при обычном прикосновении палец нужно отпустить в том же месте, где приложил, то есть жест требует хоть какой-то аккуратности и прицельности.|
Любопытно, что в третьей версии операционной системы часов этот же жест приспособили для листания. Причём так же, как на Айфоне: c обратной связью и примагничиванием к дискретным местам. В доке для переключения между приложениями, а в некоторых приложениях — для переключения между соседними экранами можно вращать коронку: |
|
Впереди — совет о том, как взять от листания и прокрутки лучшие черты. |
Что такое свиток?
Обновлено: 07.02.2022 автором Computer Hope
Свиток может относиться к любому из следующего:
1. Прокрутка или прокрутка — это перемещение визуальных частей окна вверх, вниз, влево или вправо для просмотра дополнительной информации об окне. Прокрутка может происходить по одной строке за раз или по одной странице за раз, в зависимости от ваших настроек и способа прокрутки.
Ниже приведен пример окна Microsoft Windows, которое пользователь может прокручивать вверх и вниз с помощью вертикальной полосы прокрутки, а затем влево и вправо с помощью горизонтальной полосы прокрутки.
Кончик
Если вы используете мышь с колесиком, она может прокручивать страницу вверх и вниз. Некоторые колеса могут даже иметь возможность толкаться влево или вправо для горизонтальной прокрутки.
- Как прокручивать с помощью клавиатуры.
- Как прокручивать с помощью сенсорной панели.
- Как прокручивать с помощью сенсорного экрана.
- Связанная информация.
Прокрутка вверх и вниз зависит от того, что вы видите на экране. Ниже приведен список методов, которые можно использовать для прокрутки с помощью клавиатуры.
Клавиши страницы вверх и вниз
Клавиши page up и page down являются наиболее распространенным методом прокрутки одной страницы за раз на экране. Нажатие страницы вверх прокручивает одну страницу вверх или перемещает вас в начало страницы. Нажатие страницы вниз прокручивает одну страницу за раз или переводит вас в конец страницы.
Примечание
Некоторые люди могут также называть клавиши страницы вверх и страницы вниз клавишами прокрутки , не путать с клавишей блокировки прокрутки.
Клавиши со стрелками
С помощью клавиш со стрелками вверх и вниз выполняется прокрутка вверх и вниз по одной строке за раз.
Если просматриваемая страница может прокручиваться по горизонтали, нажатие клавиш со стрелками влево или вправо прокручивает страницу в выбранном направлении.
Примечание
Если вы редактируете документ или текстовое поле, клавиши со стрелками перемещают текстовый курсор в направлении нажатой клавиши со стрелкой.
Пробел
Клавиша пробела также может использоваться для прокрутки страницы вниз при чтении веб-страницы. Кроме того, нажав и удерживая Shift и одновременное нажатие пробела прокручивает страницу вверх на одну страницу за раз.
Например, вы можете нажать клавишу пробела сейчас, чтобы прокрутить одну страницу вниз, а затем нажать Shift и клавишу пробела , чтобы прокрутить обратно вверх.
Примечание
Если ваш текстовый курсор находится в текстовом поле или в редактируемой части веб-страницы или документа, при нажатии пробела прокрутка не выполняется.
Это создает пространство.
Прокрутка на сенсорной панели зависит от типа используемого ноутбука и его операционной системы. Ниже мы перечислили наиболее распространенные способы прокрутки с помощью сенсорной панели.
Два пальца
Сегодня большинство ноутбуков и Chromebook поддерживают возможность одновременного касания сенсорной панели двумя пальцами для прокрутки вверх и вниз. Например, перетаскивание указательного и среднего пальцев вниз прокручивает страницу вниз. Скольжение вверх двумя пальцами прокручивает страницу вверх.
Кончик
Направление прокрутки страницы также можно настроить в настройках сенсорной панели.
Край сенсорной панели
На некоторых сенсорных панелях, особенно на сенсорных панелях более ранних моделей без поддержки нескольких пальцев, имеется функция прокрутки по краю сенсорной панели. Например, перетаскивание пальцем вверх или вниз по дальнему правому краю сенсорной панели прокручивает страницу вверх и вниз.
Кроме того, сенсорные панели, поддерживающие этот тип прокрутки, могут выполнять горизонтальную прокрутку, если провести пальцем влево или вправо по нижнему краю сенсорной панели.
На устройстве с сенсорным экраном проведите пальцем вверх или вниз, чтобы прокрутить экран вверх или вниз. Смахивание вверх прокручивает вниз, а смахивание вниз — вверх. Если на экране есть горизонтальная полоса прокрутки, смахивание влево прокручивает вправо, а смахивание вправо — влево.
- Как непрерывно прокручивать мышь.
- Используйте тег
2. В компьютерных играх свиток описывает рулон бумаги с текстом, содержащим информацию об игре или истории. В некоторых играх свиток может дать персонажу постоянные или временные способности.
Игровые термины, Горизонтальная прокрутка, Термины операционной системы, Пейджинг, Клавиша блокировки прокрутки, Вертикальная прокрутка
scrollIntoView | Cypress Documentation
Прокрутите элемент в поле зрения.
Небезопасно
цепочка дальнейших команд, которые полагаются на тему после .scrollIntoView() .
Синтаксис
.scrollIntoView() .scrollIntoView(параметры)
Использование
Правильное использование
cy.get('footer').scrollIntoView() // Прокручивает нижний колонтитул в поле зрения
Неправильное использование
cy.scrollIntoView('footer') // Ошибки, не могут быть объединены в цепочку с 'cy'
cy.window().scrollIntoView() // Ошибки, 'окно' не дает элемент DOM
Аргументы
параметры (объект)
Передайте объект параметров, чтобы изменить поведение по умолчанию .scrollIntoView() .
| Опция | По умолчанию | Описание |
|---|---|---|
duration | 0 | Scrolls over the duration (in ms) |
easing | swing | Will scroll with the easing animation |
log | true | Отображение команды в журнале команд0158 |
timeout | defaultCommandTimeout | Time to wait for . to resolve before timing out |
scrollIntoView() Yields
-
.scrollIntoView()yields the same subject it was данный. - Это небезопасно
чтобы связать дальнейшие команды, которые зависят от темы после
.scrollIntoView().
Примеры
Прокрутка
cy.get('button#checkout').scrollIntoView().should('be.visible')
Опции
Использовать линейную анимацию замедления для прокрутки
cy.get('.next-page').scrollIntoView({ easing: 'linear' })
Прокрутить до элемента более 2000 мс
cy.get('footer').scrollIntoView({ duration: 2000 })
Прокрутка на 150 пикселей ниже элемента
cy.get('#nav').scrollIntoView({ offset: { top: 150, left: 0 } })
Примечания
Снимки
Снимки не отражают поведение прокрутки
Cypress не отражает точное положение прокрутки любых элементов внутри
снимки.