Compare commits

...

2 Commits

Author SHA1 Message Date
f30793af80 Publish
- @advdominion/scroll-to@1.0.0
2026-02-02 18:23:50 +04:00
3605551f16 @advdominion/scroll-to 2026-02-02 18:22:51 +04:00
4 changed files with 93 additions and 0 deletions

View File

@@ -0,0 +1,33 @@
# 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. **Очистка данных:** Автоматически удаляет слушатели событий и таймеры после завершения или отмены скролла.

View File

@@ -0,0 +1,40 @@
export const scrollTo = ($el, offset = 0, offsetInPx = false) => {
return new Promise((resolve) => {
if (!$el) {
console.warn('Элемент не найден');
resolve();
return;
}
const elementPosition = $el.getBoundingClientRect().top + window.scrollY;
const topOffset = offsetInPx ? offset : (window.innerHeight * offset) / 100;
const targetScrollTop = elementPosition - topOffset;
// Если элемент уже в нужной позиции
if (Math.abs(window.scrollY - targetScrollTop) < 1) {
resolve();
return;
}
let resolved = false; // На случай, если scrollend и fallback запустятся одновременно
let fallbackTimeout; // eslint-disable-line prefer-const
const done = () => {
if (resolved) return;
resolved = true;
window.removeEventListener('scrollend', done);
clearTimeout(fallbackTimeout);
resolve();
};
window.addEventListener('scrollend', done, { once: true });
fallbackTimeout = setTimeout(done, 1500);
window.scrollTo({
top: targetScrollTop,
behavior: 'smooth',
});
});
};

View File

@@ -0,0 +1,14 @@
{
"name": "@advdominion/scroll-to",
"version": "1.0.0",
"type": "module",
"main": "index.js",
"repository": {
"type": "git",
"url": "https://gitea.optiweb.ru/public/frontend.git"
},
"license": "MIT",
"publishConfig": {
"access": "public"
}
}

View File

@@ -48,6 +48,12 @@ __metadata:
languageName: unknown
linkType: soft
"@advdominion/scroll-to@workspace:packages/scroll-to":
version: 0.0.0-use.local
resolution: "@advdominion/scroll-to@workspace:packages/scroll-to"
languageName: unknown
linkType: soft
"@babel/code-frame@npm:^7.0.0":
version: 7.27.1
resolution: "@babel/code-frame@npm:7.27.1"