scrolline
v1.0.0
Published
```HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <scroll-progress data-sp-label="text"></scroll-progres
Downloads
2
Maintainers
rciruReadme
js-scroll-progress
Пример использования | Example of use:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<scroll-progress data-sp-label="text"></scroll-progress>
<script src="scroll-progress.js"></script>
</body>
</html>
Описание на русском языке
scroll-progress — это легковесный пользовательский элемент, который отображает индикатор прогресса прокрутки на веб-страницах. Этот компонент помогает пользователям отслеживать их положение на странице, предоставляя визуальную обратную связь о том, насколько они прокрутили контент. Он идеально подходит для длинных страниц, где пользователи могут потерять представление о своей текущей позиции.
Основные характеристики:
- Простота использования: Легко интегрируется в любой проект с использованием стандартного HTML.
- Доступность: Включает ARIA-атрибуты для улучшения взаимодействия с экранными читалками.
- Настраиваемый стиль: Пользователи могут легко изменять внешний вид индикатора с помощью CSS.
- Оптимизированный производительность: Эффективно обновляет прогресс при прокрутке, минимизируя нагрузку на производительность.
Атрибут data-sp-label:
Атрибут data-sp-label позволяет разработчикам задавать текстовую метку для индикатора прогресса. data-sp-label заменяется на aria-label Эта метка используется для улучшения доступности элемента, предоставляя дополнительную информацию о его функции. Например, если вы укажете data-sp-label="Прогресс прокрутки", это поможет экранным читалкам сообщить пользователям о назначении индикатора. Этот атрибут не обязателен.
Изменение стилей через переменные:
Вы можете настроить внешний вид индикатора прогресса, изменяя CSS-переменные в корневом элементе. Вот доступные переменные:
--sp-color-background: Цвет фона индикатора.
--sp-color-line: Цвет линии прогресса.
--sp-height: Высота индикатора.
--sp-transition: Параметры перехода для анимации изменения ширины линии.
Пример изменения стилей:
:root {
--sp-color-background: #E0E0E0 !important;
--sp-color-line: #4CAF50 !important;
--sp-height: 0.5rem !important;
}Description in English
scroll-progress is a lightweight custom element that displays a scroll progress indicator on web pages. This component assists users in tracking their position within the page by providing visual feedback on how far they have scrolled through the content. It is particularly useful for lengthy pages where users may lose track of their current position.
Key Features:
- Ease of Use: Easily integrates into any project using standard HTML.
- Accessibility: Includes ARIA attributes to enhance interaction with screen readers.
- Customizable Style: Users can easily modify the appearance of the indicator using CSS.
- Optimized Performance: Efficiently updates the progress as users scroll, minimizing performance overhead.
Attribute data-sp-label:
The data-sp-label attribute allows developers to set a textual label for the progress indicator. data-sp-label is replaced by aria-label. This label is used to enhance the accessibility of the element by providing additional information about its function. For example, if you specify data-sp-label="Scroll Progress", it helps screen readers convey the purpose of the indicator to users. This attribute is optional.
Changing styles via variables:
You can customize the appearance of the progress bar by changing CSS variables in the root element. Here are the available variables:
-sp-color-background: The background color of the indicator.
-sp-color-line: The color of the progress line.
-sp-height: The height of the indicator.
-sp-transition: Transition parameters for animation of line width change.
-sp-color-line: The color of the progress bar
:root {
--sp-color-background: #E0E0E0E0 !important;
--sp-color-line: #4CAF50 !important;
--sp-height: 0.5rem !important;
}