34 lines
2.2 KiB
Markdown
34 lines
2.2 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. **Очистка данных:** Автоматически удаляет слушатели событий и таймеры после завершения или отмены скролла.
|