Прокрутка сайта – Плавная прокрутка сайта

Хватит делать сайты с бесконечной прокруткойǃ / Habr

TL;DR. Хотя бесконечная прокрутка подходит для некоторых случаев, но она может создать проблемы.

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

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

scroll (свиток) (n.): c. 1400, “рулон пергамента или бумаги”

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

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

1. Строки (и столбцы)

2. Окна (не операционная система)

В Диспетчере программ Windows 3.1 несколько «свитков»

3. Веб-страницы

Разбивка страниц на основе смещения

-- All posts count
SELECT COUNT(*) AS total FROM posts

-- First page items
SELECT * FROM posts LIMIT 10

-- Third page items
SELECT * FROM posts LIMIT 10 OFFSET 30 

{
  "pagination": {
    "items_count": 100,
    "current": 3,
    "total_pages": 10
  },
  "items": [...]
}

Плюсы и минусы пагинации на основе смещения:

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

Пагинация по указателю

Каждой строке присваивается уникальный указатель. Не нужно обсчитывать всю таблицу и знать точное число страниц:

-- Get extra 1 item to get its cursor.
SELECT * FROM posts ORDER BY id DESC LIMIT 11

{
  "pagination": {
    "next": 1234 // extra item's ID (cursor), null if end of data.
  },
  "items": [...]
}

-- Offsetting records using 1234 cursor
SELECT * FROM posts WHERE id >= 1234 ORDER BY id LIMIT 11 

Плюсы и минусы пагинации по указателям:

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

Следующий и предыдущий

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

Пагинация WordPress

Нумерация страниц

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

Примеры нумерации

Google использует такую навигацию в результатах поиска:

Загрузить ещё

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

Кнопка «Загрузить ещё»

В приведённом выше примере пользователь нажимает кнопку «Загрузить ещё» (Load More), чтобы увидеть больше контента.

Бесконечная прокрутка

Бесконечная прокрутка — новейшая техника пагинации на основе указателей.

Хью Уильямс утверждает, что изобрёл бесконечную прокрутку в 2005 году для Microsoft.

Metafizzy разработала open source инструмент, помогающий разработчикам реализовать бесконечную прокрутку.

Поиск футера

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

Футер Twitter на правой боковой панели

Не используйте бесконечную прокрутку, если у вас нет таймлайна или ленты

Дайте пользователям больше контроля

Событие прокрутки не ведёт явно к намерению что-то делать. Люди перемещаются по странице, а если хотят совершить действие, то обычно делают клик или прикасаются к экрану (это и есть триггеры). Они информируют UI о своем решении. Но бесконечная прокрутка срабатывает без какого-либо решения.

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

Вместо бесконечной прокрутки поставьте кнопку «Загрузить ещё», которая является триггером. Это даст пользователю контроль. (Я бы предпочел старый стиль нумерации страниц, но мы предполагаем, что сейчас используем пагинацию по указателям).

Разрешите пользователям идти куда они хотят

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

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

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

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

habr.com

Плавная прокрутка страницы колесиком ⋆ Все секреты интернета

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

В этой статье пойдёт речь о том, как сделать плавную прокрутку страницы в Chrome

Почему именно Хром, а не какой либо другой браузер?

• Ну, во-первых, Chrome это мой любимый браузер, я им постоянно пользуюсь, поэтому о нём и пишу.
• Во-вторых, обо всех браузерах сразу то и не напишешь.

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

Плавная прокрутка страницы в Google Chrome

Данная функция в браузере Хром реализована на аппаратном уровне, но является скрытой.

Почему она скрыта? Дело в том, что разработчики Хрома пока никак не могут довести её «до ума».

То-есть, она вроде бы и есть, но работает не всегда корректно. Поэтому, её отнесли к экспериментальным функциям.

Включить опцию «Плавная прокрутка страницы колесиком в Chrome» можно набрав в строке браузера запрос: chrome://flags/ и нажав клавишу «Enter»

В результате, попадёте в раздел с экспериментальными функциями.

Внимательно «Прошерстите» все опции и где то там, должна быть функция «Плавная прокрутка страницы колёсиком»

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

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

В данном случае, я имею в виду установку в браузер специального расширения для Хром, под названием «Chromium Wheel Smooth Scroller»

Как сделать плавную прокрутку страницы

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

После установки надо перейти в раздел «Расширения». Далее делаем как на рисунке. Кликнув по пункту №4, попадаем в «Настройки»

Тут вы увидите страницу на английском языке.

Если с иностранным «не дружите», то просто переведите Хром переводчиком, и получите вот такую картинку.

Думаю, теперь всё понятно без лишних толкований.

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

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

<iframe scrolling="auto | no | yes">...</iframe>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег IFRAME, атрибут scrolling</title>
 </head>
 <body>

  <iframe src="tip.html" scrolling="no"></iframe>

 </body>
</html>

<div>
Текст вставляется здесь между уголков
</div>