Сбоку от текста закреплена тонкая шкала из горизонтальных делений. Пока страница не прокручена, деления едва заметны, а по мере чтения они сверху вниз проявляются в полную яркость.
Вдоль шкалы едет короткий указатель с числом от 1 до 100, который точно показывает пройденную долю. Индикатор следует за прокруткой без задержки и работает как со всей страницей, так и с отдельным прокручиваемым блоком.
Скопируйте эти файлы в components/scroll-progress-ticks/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { useRef } from "react";
import { ScrollProgressTicks } from "@/components/scroll-progress-ticks/scroll-progress-ticks";
export function Article() {
const scrollRef = useRef<HTMLDivElement>(null);
return (
<div ref={scrollRef} className="h-[640px] overflow-y-auto">
<ScrollProgressTicks container={scrollRef} height={240} tickGap={6}>
<article className="mx-auto max-w-xl py-[50vh]">Длинный текст статьи</article>
</ScrollProgressTicks>
</div>
);
}container?Прокручиваемый блок; без него отслеживается окно
Тип RefObject<HTMLElement | null>
children?Содержимое рядом со шкалой
Тип ReactNode
color?Цвет делений, указателя и процента
Тип string·По умолчанию "var(--foreground)"
height?Высота шкалы в пикселях
Тип number·По умолчанию 192
width?Длина делений в пикселях
Тип number·По умолчанию 16
tickGap?Шаг между делениями в пикселях
Тип number·По умолчанию 5
trackOpacity?Яркость ещё не пройденных делений
Тип number·По умолчанию 0.15
offset?Отступ шкалы от левого края
Тип number·По умолчанию 40
showLabel?Показывать число с процентом
Тип boolean·По умолчанию true
className?Классы корневого блока
Тип string