Compare commits
4 Commits
@advdomini
...
@advdomini
| Author | SHA1 | Date | |
|---|---|---|---|
|
f30793af80
|
|||
|
3605551f16
|
|||
|
f8d793195c
|
|||
|
a655e7b5e4
|
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@advdominion/babel-plugin-nunjucks",
|
||||
"version": "3.0.3",
|
||||
"version": "3.1.0",
|
||||
"type": "module",
|
||||
"main": "index.js",
|
||||
"repository": {
|
||||
@@ -11,10 +11,8 @@
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"dependencies": {
|
||||
"nunjucks": "^3.2.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.0.0"
|
||||
"@babel/core": "^7.0.0",
|
||||
"nunjucks": "^3.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
33
packages/scroll-to/README.md
Normal file
33
packages/scroll-to/README.md
Normal 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. **Очистка данных:** Автоматически удаляет слушатели событий и таймеры после завершения или отмены скролла.
|
||||
40
packages/scroll-to/index.js
Normal file
40
packages/scroll-to/index.js
Normal 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',
|
||||
});
|
||||
});
|
||||
};
|
||||
14
packages/scroll-to/package.json
Normal file
14
packages/scroll-to/package.json
Normal 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"
|
||||
}
|
||||
}
|
||||
48
yarn.lock
48
yarn.lock
@@ -8,10 +8,9 @@ __metadata:
|
||||
"@advdominion/babel-plugin-nunjucks@workspace:packages/babel-plugin-nunjucks":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@advdominion/babel-plugin-nunjucks@workspace:packages/babel-plugin-nunjucks"
|
||||
dependencies:
|
||||
nunjucks: "npm:^3.2.4"
|
||||
peerDependencies:
|
||||
"@babel/core": ^7.0.0
|
||||
nunjucks: ^3.0.0
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
@@ -49,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"
|
||||
@@ -1310,13 +1315,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"a-sync-waterfall@npm:^1.0.0":
|
||||
version: 1.0.1
|
||||
resolution: "a-sync-waterfall@npm:1.0.1"
|
||||
checksum: 10c0/1c7b258da2c77eb1447dcc683afb10ca3dc8880de990562ccbb7b282538aba01e910345ce9e8500c1458272c7866b85fcfa5ca8159e33550b011ab5c586ec5a4
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"abbrev@npm:^3.0.0":
|
||||
version: 3.0.1
|
||||
resolution: "abbrev@npm:3.0.1"
|
||||
@@ -1487,13 +1485,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"asap@npm:^2.0.3":
|
||||
version: 2.0.6
|
||||
resolution: "asap@npm:2.0.6"
|
||||
checksum: 10c0/c6d5e39fe1f15e4b87677460bd66b66050cd14c772269cee6688824c1410a08ab20254bb6784f9afb75af9144a9f9a7692d49547f4d19d715aeb7c0318f3136d
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"async-function@npm:^1.0.0":
|
||||
version: 1.0.0
|
||||
resolution: "async-function@npm:1.0.0"
|
||||
@@ -1935,13 +1926,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"commander@npm:^5.1.0":
|
||||
version: 5.1.0
|
||||
resolution: "commander@npm:5.1.0"
|
||||
checksum: 10c0/da9d71dbe4ce039faf1fe9eac3771dca8c11d66963341f62602f7b66e36d2a3f8883407af4f9a37b1db1a55c59c0c1325f186425764c2e963dc1d67aec2a4b6d
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"common-ancestor-path@npm:^1.0.1":
|
||||
version: 1.0.1
|
||||
resolution: "common-ancestor-path@npm:1.0.1"
|
||||
@@ -4697,24 +4681,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"nunjucks@npm:^3.2.4":
|
||||
version: 3.2.4
|
||||
resolution: "nunjucks@npm:3.2.4"
|
||||
dependencies:
|
||||
a-sync-waterfall: "npm:^1.0.0"
|
||||
asap: "npm:^2.0.3"
|
||||
commander: "npm:^5.1.0"
|
||||
peerDependencies:
|
||||
chokidar: ^3.3.0
|
||||
peerDependenciesMeta:
|
||||
chokidar:
|
||||
optional: true
|
||||
bin:
|
||||
nunjucks-precompile: bin/precompile
|
||||
checksum: 10c0/7fe5197559b7c09972c79e2a86f9c093459b9075bc9b41134cd2bc599ae93567b53bd09d472a748edc736192d9ccd2998aa8c20cfcbe6a3fffd281f91897c888
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"nx@npm:>=21.5.3 < 23.0.0":
|
||||
version: 22.3.3
|
||||
resolution: "nx@npm:22.3.3"
|
||||
|
||||
Reference in New Issue
Block a user