34 lines
1.9 KiB
Markdown
34 lines
1.9 KiB
Markdown
# scroll-to
|
||
|
||
Плавный скролл до элемента с поддержкой нативного события `scrollend` и гибкой настройкой отступов.
|
||
|
||
## Использование
|
||
|
||
```js
|
||
import { scrollTo } from '@advdominion/scroll-to';
|
||
|
||
// Базовый скролл до элемента
|
||
await scrollTo(document.querySelector('#example'));
|
||
|
||
// Скролл с отступом 100px (например, для фиксированной шапки)
|
||
await scrollTo(document.querySelector('#example'), 100, true);
|
||
|
||
// Скролл с отступом в 10% от высоты экрана
|
||
await scrollTo(document.querySelector('#example'), 10);
|
||
```
|
||
|
||
## Параметры
|
||
|
||
| Параметр | Тип | По умолчанию | Описание |
|
||
| :--- | :--- | :--- | :--- |
|
||
| **$el** | `HTMLElement` | — | DOM-элемент, к которому нужно прокрутить страницу |
|
||
| **offset** | `number` | `0` | Величина отступа сверху от целевого элемента |
|
||
| **offsetInPx** | `boolean` | `false` | Тип отступа: `true` — в пикселях, `false` — в процентах от высоты вьюпорта |
|
||
|
||
## Как это работает
|
||
|
||
1. **Точность:** Использует нативное событие `scrollend`, которое срабатывает строго после завершения анимации прокрутки.
|
||
2. **Безопасность:** Если браузер не поддерживает `scrollend` или анимация прервана, сработает автоматический fallback через 1500 мс.
|
||
3. **Плавность:** Использует нативный `behavior: 'smooth'`.
|
||
4. **Очистка данных:** Автоматически удаляет слушатели событий и таймеры после завершения или отмены скролла.
|