Индикаторы прокрутки — и почему свой стоит сделать собакой

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

Для чего нужна полоса прогресса

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

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

Позиция, а ещё и скорость

Полоса несёт ровно одно число — насколько далеко вы прокрутили. Есть и второе число, доступное бесплатно, и ни одна полоса его не показывает: с какой скоростью вы двигаетесь.

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

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

Чего это стоит

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

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